学习使用html2canvas生成图片定义倍数，并传递给微信小程序的方法

最新推荐文章于 2024-05-27 14:39:53 发布

徊忆羽菲

最新推荐文章于 2024-05-27 14:39:53 发布

阅读量817

点赞数

分类专栏： Javascript Html Jquery 文章标签：微信小程序学习小程序

本文链接：https://blog.csdn.net/guo_qiangqiang/article/details/128543966

版权

Html 同时被 3 个专栏收录

248 篇文章 8 订阅

订阅专栏

Javascript

231 篇文章 5 订阅

订阅专栏

Jquery

188 篇文章 1 订阅

订阅专栏

学习使用html2canvas生成图片，并传递给微信小程序的方法

- 完整代码
- 注意

完整代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>富文本测试</title>
    <!--<script type="text/javascript" src="https://cdn.staticfile.org/html2canvas/0.4.0/html2canvas.js"></script>-->
    <!-- <script type="text/javascript" src="/static/html2canvas.js"></script>-->
    <script type="text/javascript" src="/static/html2canvas1.4.1.js"></script>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0,
          user-scalable=yes”/>

</head>

<style>

    p {
        margin: 0px;
    }


    h2 {
        color: #333333;
        font-size: 40px;
        line-height: 80px;
        margin: 0px;
    }


    h3 {
        color: #333333;
        font-size: 35px;
        line-height: 70px;
        margin: 0px;
    }


    .bill_content {
        border: 1px solid;
        border-color: #E8E5DC;
        color: #333333;
        font-size: 30px;
        padding-left: 32px;
        padding-right: 32px;
        line-height: 60px;
        margin: 0px;
    }

</style>

<body>

<div style="position: fixed;background: #ffffff; width: 100%;height: 100%;">
</div>


<div id="view"
     style="background:#FFFCF5 100%; width: 750px; padding: 32px; margin:50px auto; ">

    <div class="bill_content">
        <div style="height: 60px"></div>
        <h2>富文本测试</h2>
        <br>
        <p align="center">
<span style="color:#E53333;">营销失败的四个原因</span>：
</p>
<p>
<br />
</p>
<p>
1、定位不对（飞鹤投了3000w毫无效果，就是定位不对的问题，飞鹤全产业链呵护宝宝的营养与健康，）
</p>
<p>
2、没有打透（投放没有击穿血脑屏障。现在消费者一天看上100条，一月3000条新闻，你也就记住几条好奇心浓度高的的刷屏信息，<strong>因为这些信息能越过血脑屏障阈值，进入消费者心智。越不过阈值，只能碎一地，只有极少数能越过阈值。所以浓度不够，打不透就白消耗了。所以你打不透就不要全国去大</strong>，你想办法找到一个地方精准打，例如先针对终端周边打，然后到终端去换量，广告打终端连锁名，终端连锁马上会给你安排排货优先，精准打透，超越消费血脑屏障）
</p>
<p>
3、<span style="color:#99BB00;">恶评如潮</span>（网上信息负面太多，无论是产品和品牌，无论是搜索和电商，一定要管理好用户评价。或者说要让产品能力给广告能力适配。不能广告势能很高，用户一查，全是差评）
</p>
<p>
<span style="color:#009900;">4、流量收割不行（</span>线下铺货不足，货架排面不够，还经常在货架底部，缺乏地推，经销商不给力）
</p>
<p>
<br />
</p>
<h3>
<strong>要做好营销必须要具备三大条件：</strong> 
</h3>
<p>
<strong>1、品牌引爆</strong> 
</p>
<p>
<em>2、社交种草</em> 
</p>
<p>
<u>3、流量收割。</u> 
</p>        <div style="height: 30px"></div>
    </div>


</div>


 <img style="display: none" id="item"/>

<input type="hidden" name="company_id" id="company_id" value="2">
<input type="hidden" name="wenku_id" id="wenku_id" value="3794">


<script src="/static/sign_wall_files/js/jquery.min.js"></script>


<!--小程序页面的js-->
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<!--小程序页面的js-->


<script type="text/javascript">

    taskScreenshort();

    function taskScreenshort() {

        const width = document.getElementById("view").offsetWidth;
        const height = document.getElementById("view").offsetHeight;
        let scale = 1; // 设定倍数这样不会模糊

        html2canvas(document.getElementById("view"), {
            allowTaint: true,//允许被污染
            width: width,
            heigth: height,
            windowHeight: height,
            windowWidth: width,
            scale: scale,
            scrollX: 0,
            scrollY: 0,
            y: 0,
            useCORS: true,
        }).then(canvas => {

            //赋值
            // dataUrl = canvas.toDataURL();

            dataUrl = canvas.toDataURL('image/jpeg', 1.0); //将图片转为base64

            //给小程序页面赋值
            wx.miniProgram.postMessage({
                data: {
                    imgData: dataUrl // 刚才拿到的base64 数据
                }
            });

            //赋值
            document.getElementById("item").setAttribute('src', canvas.toDataURL());

        })
    }


</script>
</body>


</html>

注意

此处代码可设定生成图片的倍数

 const width = document.getElementById("view").offsetWidth;
        const height = document.getElementById("view").offsetHeight;
        let scale = 1; // 设定倍数这样不会模糊

设置为jpeg的图片类型，图片不会太大

 dataUrl = canvas.toDataURL('image/jpeg', 1.0); //将图片转为base64

徊忆羽菲

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
学习使用html2canvas生成图片定义倍数，并传递给微信小程序的方法

学习使用html2canvas生成图片定义倍数，并传递给微信小程序的方法
复制链接

扫一扫

专栏目录

学习使用html2canvas生成图片定义倍数，并传递给微信小程序的方法

学习使用html2canvas生成图片，并传递给微信小程序的方法

完整代码

注意

“相关推荐”对你有帮助么？