php h5长按图片实现保存功能,借助toDataURL实现将HTML5 Canvas的内容保存为图片

将HTML5 Canvas的内容保存为图片主要思想是借助Canvas自己的API - toDataURL()来实现，具体实现如下，感兴趣的朋友可以参考下哈，希望对你有所帮助

主要思想是借助Canvas自己的API - toDataURL()来实现，整个实现

HTML + JavaScript的代码很简单。

window.onload = function() {

draw();

var saveButton = document.getElementById("saveImageBtn");

bindButtonEvent(saveButton, "click", saveImageInfo);

var dlButton = document.getElementById("downloadImageBtn");

bindButtonEvent(dlButton, "click", saveAsLocalImage);

};

function draw(){

var canvas = document.getElementById("thecanvas");

var ctx = canvas.getContext("2d");

ctx.fillStyle = "rgba(125, 46, 138, 0.5)";

ctx.fillRect(25,25,100,100);

ctx.fillStyle = "rgba( 0, 146, 38, 0.5)";

ctx.fillRect(58, 74, 125, 100);

ctx.fillStyle = "rgba( 0, 0, 0, 1)"; // black color

ctx.fillText("Gloomyfish - Demo", 50, 50);

}

function bindButtonEvent(element, type, handler)

{

if(element.addEventListener) {

element.addEventListener(type, handler, false);

} else {

element.attachEvent('on'+type, handler);

}

}

function saveImageInfo ()

{

var mycanvas = document.getElementById("thecanvas");

var image = mycanvas.toDataURL("image/png");

var w=window.open('about:blank','image from canvas');

w.document.write("");

}

function saveAsLocalImage () {

var myCanvas = document.getElementById("thecanvas");

// here is the most important part because if you dont replace you will get a DOM 18 exception.

// var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream;Content-Disposition: attachment;filename=foobar.png");

var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

window.location.href=image; // it will save locally

}

Save Image

Download Image

运行效果如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：