使用JS 将canvas 转化成图片 ( H5 )
今天接了个新任务, 写一个 H5 活动页,UI大概如下
我靠…图片这么大 给我自己吓了一跳。 OK 大概就是这样了。
我用了半个小时把大概的逻辑写好了,然后用了五个小时找错误…再最后一刻终于找到啦! 那就是写错了一个字母…啊啊啊啊 卧槽 猛虎落泪了已经
上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
</head>
<body>
<div class="codeimg"><img src=""/></div>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<button id="Store">保存</button>
<img src="" id="StoreImg" alt="">
</body>
<script src="http://lib.sinaapp.com/js/jquery/2.2.4/jquery-2.2.4.min.js"></script>
<script src="html2canvas.js"></script>
<script>
$(function(){
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img = new Image()
img.crossOrigin = "anonymous"
img.src = 'https://image.snaily.com.cn/yanxiaoni.jpg'
img.onload = function() {
ctx.drawImage(img,90,50,400,400);
ctx.font = "15px Arial"
ctx.fillText('超人战士与威猛先生666', 30, 40)
ctx.stroke()
}
$('#Store').click(function(){
console.log(convertCanvasToImage(c))
var boyd =document.body
boyd.appendChild(convertCanvasToImage(c))
})
function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png");
return image;
}
})
</script>
</html>
在这里我们可以忽略样式, 就是看功能。 不过这里要注意一点!!!!
这里, 因为图片跨域了, 所以我们要个 img 标签 添加跨域