js将canvas生成图片并保存到本地
微wx笑
2022-07-12【前端开发】
2
0关键字：
js canvas
需求将 canvas 生成图片并保存到本地方案使用 Canvas 的 toDataURL() 方法HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类
需求
将 canvas 生成图片并保存到本地
方案
使用 Canvas 的 toDataURL() 方法
HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型，默认为 PNG 格式。图片的分辨率为96dpi。
如果画布的高度或宽度是0，那么会返回字符串“data:,”。
如果传入的类型非“image/png”，但是返回的值以“data:image/png”开头，那么该传入的类型是不支持的。
Chrome支持“image/webp”类型。
语法
canvas.toDataURL(type, encoderOptions);
参数
type（可选）：图片格式，默认为 image/png
encoderOptions （可选）：在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。
返回值
包含 data URI 的DOMString。
// canvas 为canvas的dom节点
// name 为生成图片的名字
function downLoadImage(canvas,name) {
var a = document.createElement("a");
a.href = canvas.toDataURL();
// download 属性定义了下载链接的地址
a.download = name;
a.click();
}————————————————
版权声明：本文为CSDN博主「孤岛的千城」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：
https://blog.csdn.net/weixin_45337170/article/details/114128119注意：以上方法在微信中打开不行，提示要在浏览器中打开；但是用手机浏览器打开下载的图片再打开却提示格式有问题，无法查看。想通过微信发送到电脑上，结果提示：获取资源失败，然后尝试通过QQ发送到电脑才成功了，看来还是QQ比较强大。
在电脑上查看下载下来的文件，内容如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function getCookie(c_name) { // Local function for getting a cookie value
if (document.cookie.length > 0) {
c_start = document.cookie.indexOf(c_name + "=");
if (c_start!=-1) {
c_start=c_start + c_name.length + 1;
c_end=document.cookie.indexOf(";", c_start);
if (c_end==-1)
c_end = document.cookie.length;
return unescape(document.cookie.substring(c_start,c_end));
}
}
return "";
}
function setCookie(c_name, value, expiredays) { // Local function for setting a value of a cookie
var exdate = new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie = c_name + "=" + escape(value) + ((expiredays==null) ? "" : ";expires=" + exdate.toGMTString()) + ";path=/";
}
function getHostUri() {
var loc = document.location;
return loc.toString();
}
setCookie('YPF8827340282Jdskjhfiw_928937459182JAX666', '27.186.177.138', 10);
try {
location.reload(true);
} catch (err1) {
try {
location.reload();
} catch (err2) {
location.href = getHostUri();
}
}
</script>
</head>
<body>
<noscript>This site requires JavaScript and Cookies to be enabled. Please change your browser settings or upgrade your browser.</noscript>
</body>
</html>所以后来的解决办法是：
var img = document.createElement("img");
img.src = canvas.toDataURL();
然后把画布隐藏，显示图片，这样微信中长按图片就可以保存到本地或者发送给朋友了。
本文为转载文章，版权归原作者所有，不代表本站立场和观点。
