JavaScript html5 canvas实现图片上画超链接

本文实例为大家分享了html5 canvas在图片上画超链接的具体代码,供大家参考,具体内容如下

1. html

<canvas id="canvasFile" style="margin-top:15px;" width="500" height="400"></canvas>
<input type="button" id="btnRedo" value="Re-Draw" class="btn btn-warning"/>

2. javascript

var photoW = 400;
    var photoH = 300;
    var photo; 

    // logic load image into canvas
    // ...
    // e.g.
    // photo = new Image();
    // photo.onload = function() {
    // draw photo into canvas when ready
    // ctx.drawImage(photo, 0, 0, photoW, photoH);
    // };
    // load photo into canvas
    // photo.src = picURL; 

 // canvas highlight
    var canvas = document.getElementById('canvasFile'),
      ctx = canvas.getContext('2d'),
      img = new Image;
    var btnDone = document.getElementById('btnDone');
    var btnRedo = document.getElementById('btnRedo'); 

    ctx.strokeStyle = '#FF0000'; 

    function DrawDot(x, y) {
      var centerX = x;
      var centerY = y;
      var radius = 2; 

      ctx.beginPath();
      ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      ctx.fillStyle = 'red';
      ctx.fill();
      ctx.lineWidth = 2;
      ctx.strokeStyle = '#FF0000';
      ctx.stroke();
    } 

    function startDrawing() {
      ctx.drawImage(img, 0, 0, photoW, photoH);
      canvas.onmousemove = mousemoving;
      canvas.onmousedown = mousedownhandle;
      canvas.onmouseup = mouseuphandle;
      // ## mobile events
      //touchstart – to toggle drawing mode “on”
      //touchend – to toggle drawing mode “off”
      //touchmove – to track finger position, used in drawing
      canvas.addEventListener('touchmove', touchmove, false);
      canvas.addEventListener('touchend', mouseuphandle, false); 

      btnRedo.onclick = function (e) {
        ctx.clearRect(0, 0, ctx.width, ctx.height);
        ctx.drawImage(photo, 0, 0, photoW, photoH);
        savedrawing();
      }
    }
    function savedrawing(e) {
      var image = document.getElementById('canvasFile').toDataURL("image/jpeg");
      image = image.replace('data:image/jpeg;base64,', '');
      $("#imgNric1").val(image);
    }; 

    function mousemoving(e) {
      if (drawing) {
        mousedownhandle(e);
      }
    } 

    var drawing = false; 

    function mousedownhandle(e) {
      drawing = true;
      var r = canvas.getBoundingClientRect(),
        x = e.clientX - r.left,
        y = e.clientY - r.top; 

      DrawDot(x, y);
    }  

    function mouseuphandle(e) {
      savedrawing();
      e.preventDefault();
      drawing = false; 

    } 

    //// mobile touch events
    function touchmove(e) {
      if (e.clientX > 800) {
        mousedownhandle(e);
        return;
      } 

      var r = canvas.getBoundingClientRect(),
        //event.changedTouches[0].pageX + ":" + event.changedTouches[0].pageY;
        x = e.changedTouches[0].pageX - r.left,
        y = e.changedTouches[0].pageY - r.top; 

      DrawDot(x, y);
      e.preventDefault();
    }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2017-10-17

Ext javascript建立超链接,进行事件处理的实现方法

1,如何在javasript建立超链接 <script type="text/JavaScript"> //方法一: location.href='网址'; //方法二: document.write('<a href="网址">文字</a>'); </script> 2,应用到Ext中的树控件事件处理 tree_03.js 复制代码 代码如下: Ext.onReady(function(){ var root = n

超链接怎么正确调用javascript函数

点击超链接调用 JavaScript 函数,一般人都用: 复制代码 代码如下: <a href="javascript:function();"> 但这有个缺点,就是点击链接后,页面上的GIF动画将静止. 试看如下代码: 复制代码 代码如下: <script type="text/javascript"> <!-- function Foo() {     //do something } //--> </script>

让网页上的超链接失效,不能点击的js代码

让网页上的超链接失效,不能点击 a {poorfish:expression(this.onclick=function kill(){return false})} 我们 www.163.com www.sohu.com [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

JS实现网页上随机产生超链接地址的方法

本文实例讲述了JS实现网页上随机产生超链接地址的方法.分享给大家供大家参考,具体如下: 这是一个JavaScript的应用,每刷新一次页面,会自动更换一次链接,虽然不常用,不过对Javascript随机函数Math.random() 的使用将直到引导作用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-math-rand-url-show-codes/ 具体代码如下: <html> <head> <title>在

js实现a标签超链接提交form表单的方法

本文实例讲述了js实现a标签超链接提交form表单的方法.分享给大家供大家参考.具体实现方法如下: <form action="/home/search" method="get" id="search_form"> <div class="searchBox png" id="searchBox"> <input type="text" id="

javascript禁止超链接跳转的方法

本文实例讲述了javascript禁止超链接跳转的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l

js 取消超链接的方法小结

单个链接取消链接并触发js事件 复制代码 代码如下: <a href="javascript:void(0);" onclick="alert('ok')">测试</a> 批量将网页中的链接取消或重新设置链接的代码: 百度    我们 服务器软件    素材下载 站长查询    脚本下载 function doLinkAll(action){ var arr=document.getElementsByTagName("A"

四种参数传递的形式——URL,超链接,js,form表单

什么时候用GET,  查,删 什么时候用POST,增,改  (特列:登陆用Post,因为不能让用户名和密码显示在URL上) 4种get传参方式 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>&l

js form表单input框限制20个字符,10个汉字代码实例

直接粘贴到html文件便可看到效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-widt

asp.net使用JS+form表单Post和Get方式提交数据

最近工作中用到了一种使用JS+form用post方式上传文件一种方式.前台用Html input,使用JS方式往服务器上传文件,具体实现看代码: 前台页面使用aspx网页,使用input 标签,用其file类型:此标签不使用runat="server".不使用服务器控件:这里需要加上一个iframe标签.并隐藏:设置一a标签.用来作为用户点击按钮:调用JS函数:Uploadfun(); <div> <input type="file" id=&qu

基于Django URL传参 FORM表单传数据 get post的用法实例

POST和GET是web开发中常用的表单交互方法,是构建web前后端交互系统的顶梁柱,现将Django中的简单用法示例记录下来,以供后续查询和其他同学参考 1.URL传参 #前端html的链接中用模版标签把参数"x"传递给achievement这个应用的yearcontent方法 <td><a href={% url 'achievement:yearcontent' x %} >{{ x }}</a></td> #urls.py中用正则

js的form表单提交url传参数(包含+等特殊字符)的两种解决方法

方法一:(伪装form表单提交) linkredwin = function(A,B,C,D,E,F,G){ var formredwin = document.createElement("form"); formredwin.method = 'POST'; document.body.appendChild(formredwin); formredwin.action = "http://www.A.com/A.wiki?A=" +encodeURI(A) +

mvc form表单提交的几种形式整理总结

mvc中form表单提交的几种形式 第一种方式:submit 按钮 提交 <form action="MyDemand" method="post"> <span>关键字:</span> <input name="keywords" type="text" value="@keywords" /> <input type="submit&quo

利用JS提交表单的几种方法和验证(必看篇)

工作中发现表单提交方便的问题,很多时候IE下提交好好的,打了火狐下就出现了问题,利用提交按钮就不成功了,于是利用JS的方式就成功了,也不知道为什么.在导师的催促下就总结出以下的几种常用表单提交的方法. 第一种方式:表单提交,在form标签中增加onsubmit事件来判断表单提交是否成功 <script type="text/javascript"> function validate(obj) { if (confirm("提交表单?")) { aler

php解决和避免form表单重复提交的几种方法

前言 为什么要避免form表单被重复提交呢?因为我们不想让我们的服务器重复处理没必要的数据,同时我们也是避免我们的数据库产生重复的数据,避免表单重复提交也是让我们的网站更安全的一种表现. 先看一下有哪些情况下回导致表单重复提交呢,知道哪些情况下可能会出现表单重复提交就可以从根源处理表单重复提交的情况了. 下面的情况就会导致表单重复提交: 点击提交按钮两次. 点击刷新按钮. 使用浏览器后退按钮重复之前的操作,导致重复提交表单. 使用浏览器历史记录重复提交表单. 浏览器重复的HTTP请求. 网页被恶

php实现跨域提交form表单的方法【2种方法】

本文实例讲述了php实现跨域提交form表单的方法.分享给大家供大家参考,具体如下: 有时我们为了网站安全考虑,我们不允许直接跨域提交form表单数据,如果我们自己有这个需求呢?下面我们来介绍两种跨域的方法解决直接跨域问题. 下面我们来看看两种php跨域提交form的方法 一.通过php curl function curlPost($url,$params) { $postData = ''; foreach($params as $k => $v) { $postData .= $k . '