使用JS 将canvas 转化成图片 ( H5 )

最新推荐文章于 2024-08-06 11:44:45 发布

划水运动员9527

最新推荐文章于 2024-08-06 11:44:45 发布

阅读量2.1k

点赞数

分类专栏： canvas html5 文章标签： canvas

本文链接：https://blog.csdn.net/qq_37449852/article/details/85292916

版权

html5 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

canvas

3 篇文章 0 订阅

订阅专栏

今天接了个新任务, 写一个 H5 活动页，UI大概如下
![在这里插入图片描述](https://img-blog.csdnimg.cn/20181227170705724.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDQ5ODUy,size_16,color_FFFFFF,t_70
我靠…图片这么大给我自己吓了一跳。 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>

在这里我们可以忽略样式, 就是看功能。不过这里要注意一点！！！！
在这里插入图片描述