canvas转存为图片实例教程_H5之家 - 中国HTML5教程资源分享第一站

　有时候，我们绘制好的canvas想存储为本地图片，该怎么做呢?canvas提供了一个重要的方法toDataURL()，这个方法能把画布里的图案转变成base64编码格式的png或者其他格式的图片(根据你传入的mine类型的参数)，然后返回 Data URL数据。接下来我们看具体是怎么实现的。

　　html页面一个canvas画布：

　　对应的js代码实现：

var c=document.getElementById("canvas"); function drawLove(canvas){ let ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.fillStyle="#E992B9"; ctx.moveTo(75,40); ctx.bezierCurveTo(75,37,70,25,50,25); ctx.bezierCurveTo(20,25,20,62.5,20,62.5); ctx.bezierCurveTo(20,80,40,102,75,120); ctx.bezierCurveTo(110,102,130,80,130,62.5); ctx.bezierCurveTo(130,62.5,130,25,100,25); ctx.bezierCurveTo(85,25,75,37,75,40); ctx.fill(); } drawLove(c); var butSave = document.getElementById("save"); butSave.onclick=function(){ var svaeHref = document.getElementById("save_href"); /* * 传入对应想要保存的图片格式的mime类型 * 常见：image/png，image/gif,image/jpg,image/jpeg */ var img = document.getElementById("save_img"); var tempSrc = canvas.toDataURL("image/png"); svaeHref.href=tempSrc; img.src=tempSrc; };

　　点击save按钮后，显示图片，点击图片即可弹出下载对话框。

　　效果如下：

以上就是canvas转存为图片实例教程的详细内容，更多请关注php中文网其它相关文章！

DragEvent是一个表示drag和drop交互的DOM event接口。用户通过将指针设备（如：鼠标）放在目标的表面开始拖动，然后拖动指针到一个新的位置（如其他DOM元素）。应用程序自动的解析拖放交互。DragEvent接口从mouseEvent和Event那儿继承属性。

Event types

DragEvent并不是一个单一的事件，它包含了多个事件，这些事件分别是：drag，dragstart，dragenter，dragend，dragover，dragexit，dragleave，drop。

drag：这个事件在元素拖拽的过程中反复触发，每一百毫秒触发一次。这事件的目标元素是被拖的那个元素，该事件可冒泡，可取消默认行为。

dragstart：这个事件在用户开始拖动时触发。这个事件的目标元素是被拖的那个元素，在这些事件中，dragstart事件最先触发。该事件可冒泡，可取消默认行为。

dragenter：这个事件在被拖的元素进入一个合法的可drop目标时触发。这个事件的目标元素是这个可drop目标。该事件可冒泡，可取消默认行为。

dragover：当被拖的元素在可drop目标范围内移动时反复触发这个事件，一百毫秒触发一次。这个事件的目标元素是这个可drop目标。该事件可冒泡，可取消默认行为。

dragend：当拖拽结束时触发这个事件，这个事件的目标元素是被拖的元素。在这些事件中dragend最后触发。该事件可冒泡，不能取消默认行为。

dragleave：这个事件在被拖得元素离开合法的可drop目标时触发。这个事件的目标元素是这个可drop目标。该事件可冒泡，不能取消默认行为。

dragexit：当一个可drop元素不再是拖拽操作最近的drop目标时触发这个事件。这个事件的目标元素是这个可drop元素。该事件可冒泡，不嫩取消默认行为。

drop：当在可drop目标上松开拖动元素的指针设备时触发这个事件，该事件的目标元素是这个可drop目标。drop事件在dragend事件触发之前触发。这个事件可冒泡，可取消默认行为。

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>test target</title> <style type="text/css"> #drag{ width:200px; height:200px; background-color: aqua; } .drop{ width: 300px; height: 300px; background-color: antiquewhite; } </style> </head> <body> <p id="drag" draggable="true" ondragstart="event.dataTransfer.setData('text/plain','dddd')"> 我可以拖动 </p> <img src="test.jpg" id="img"> <p class="drop"></p> <script type="text/javascript"> document.addEventListener('drag',function(event){ event.target.style.backgroundColor = 'black'; },false); document.addEventListener('dragstart',function(event){ event.target.style.backgroundColor = 'red'; },false); document.addEventListener('dragend',function(event){ event.target.style.backgroundColor = 'yellow'; },false); document.addEventListener('dragover',function(event){ event.preventDefault(); event.target.style.backgroundColor = 'blue'; },false); document.addEventListener('dragenter',function(event){ event.target.style.backgroundColor = 'green'; },false); document.addEventListener('dragleave',function(event){ event.target.style.backgroundColor = 'pink'; },false); document.addEventListener('dragexit',function(event){ event.target.style.backgroundColor = 'red' },false); document.addEventListener('drop',function(event){ event.preventDefault(); event.target.style.backgroundColor = 'white'; console.log(2); },false) </script> </body> </html>

这些事件的事件对象包含鼠标事件的事件对象的方法与属性。之外还存在一个dataTransfer属性

让元素可拖

在HTML中默认可拖的元素只有image，link及被选择的文本。要让其他元素可拖，需要做下面这三件事：

1.给元素设置一个draggable属性，并且将这个属性的值设置为true

2.在这个元素上添加一个dragstart的事件监听