vue-drag-resize + html2canvas合成图片并下载

vue-drag-resize + html2canvas 合成图片并下载

可以实现图片拖动，缩放，最后合成一个图片并且下载的功能

一、下载 vue-drag-resize 和 html2canvas

npm install --save vue-drag-resize
npm install --save html2canvas

二、使用

<template>
    <div class="new-page">
        <div id="myH5" :style="{width:parentW+'px',height:parentH+'px',backgroundImage: 'url('+ parentBg +')'}">
            <VueDragResize :aspectRatio="true" :w="codeVw" :h="codeVh" :x="codeLeft" :y="codeTop" :parentLimitation="true" :parentW="parentW" :parentH="parentH"  v-on:resizing="resize($event, 'code')" v-on:dragging="resize($event, 'code')">
            <div class="code" :style="{width: + codeVw+ 'px',height:+codeVh+'px',top: + codeTop+ 'px',left:+codeLeft+'px'}">
                <img :src="code" style="width: 100%;height: 100%" />
            </div>
            </VueDragResize>
        </div>
        <span>x: {
    
    {
    
     codeLeft }}</span>
        <span>y: {
    
    {
    
     codeTop }}</span>
        <button @click="saveImg('myH5')">保存</button>
    </div>
</template>


<script>
import VueDragResize from 'vue-drag-resize';
import html2canvas from "html2canvas"

export default {
    
    
    data() {
    
    
        return {
    
    
            parentW: 375, // 海报宽度
            parentH: 667, // 海报高度
            // 二维码图片
            code: 'https://i.ibb.co/C8gLnRy/61-754-22a389010e92af1417c669aeeeecfec4-91a712f1aa206fab060e33cacc636d99-1.png',
            // 海报背景
            parentBg: 'http://leads-fm-content.oss-cn-beijing.aliyuncs.com/img/7pSnGjq4JzHL3IkA0TNHSw5rEMir8uogmWFIN0qM.png',
            codeVw: 80, // 二维码宽度
            codeVh: 80, // 二维码高度
            codeTop: 0, // 二维码顶部距离
            codeLeft: 0 // 二维码左边距离
        }
    },
    components: {
    
    
        VueDragResize
    },
    methods: {
    
    
		
		// 拖动、缩放二维码
        resize(newRect) {
    
    
            this.codeVw = newRect.width;
            this.codeVh = newRect.height;
            this.codeTop = newRect.top;
            this.codeLeft = newRect.left;
        },

        // 保存
        saveImg(val) {
    
    
            window.pageYoffset = 0;
            document.documentElement.scrollTop = 0;
            document.body.scrollTop = 0;
            // 先获取你要转换为img的dom节点
            var node = document.getElementById(val);//传入的id名称
            var width = node.offsetWidth; //dom宽
            var height = node.offsetHeight; //dom高
            var scale = 2; //放大倍数 这个相当于清晰度 调大一点更清晰一点
            console.log(height);
            console.log(width);
            window.pageYoffset = 0;

            document.documentElement.scrollTop = 0;

            document.body.scrollTop = 0;
            html2canvas(node, {
    
    
                width: width,
                heigth: height,
                backgroundColor: "#ffffff", //背景颜色 为null是透明
                dpi: window.devicePixelRatio * 2, //按屏幕像素比增加像素
                scale: scale,
                X: 0,
                Y: 0,
                scrollX: 0, //如果左边多个白边 设置该偏移-3 或者更多
                scrollY: 0,
                useCORS: true, //是否开启跨域配置 !!!
                allowTaint: true //是否允许跨域图像污染画布  !!!
            }).then(canvas => {
    
    
                var url = canvas.toDataURL('image/jpeg', 1.0); //这里上面不设值cors会报错
                console.log(url);
                var a = document.createElement("a");//创建一个a标签 用来下载
                a.download = "html2canvas合成图"; //设置下载的图片名称
                var event = new MouseEvent("click");//增加一个点击事件
                a.href = url;//此处的url为base64格式的图片资源
                a.dispatchEvent(event); //触发a的单击事件 即可完成下载
            });
        },

    }
}
</script>

<style scoped lang="less">
    #myH5{
    
    
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
</style>

三、跨域问题

如果出现跨域问题的话，请检查 html2canvas()函数中第二个参数的属性 useCORS: true 和 allowTaint: true，确保他们的值为 true，如果还不行的话就是你所使用的图片所在的服务器设置了跨域，交给后台处理下服务器设置就行了。

四、vue-drag-resize 属性表

属性名	类型	作用	默认
isActive	Boolean	是否激活状态	false
isDraggable	Boolean	是否允许拖拽	true
isResizable	Boolean	是否允许缩放	true
aspectRatio	Boolean	是否等比例缩放	false
w	Number	组件宽度	200
h	Number	组件高度	200
minw	Number	最小宽度	50
minh	Number	最小高度	50
x	Number	定位left	0
y	Number	定位top	0
z	Number	层级	auto
sticks	Array	元素缩放的节点定义	[‘tl’, ‘tm’, ‘tr’, ‘mr’, ‘br’, ‘bm’, ‘bl’, ‘ml’]
preventActiveBehavior	Boolean	单击组件外区域来禁止组件行为	false
parentLimitation	Boolean	是否超出父级元素	false
parentW	Number	父级宽度	0
parentH	Number	父级高度	0
parentScaleX	Number	父级水平偏移	1
parentScaleY	Number	父级垂直偏移	1
axis	String	允许拖拽的方向	both
dragHandle	String	拖拽时的classname	无
dragCancel	String	取消拖拽时的classname	无

钩子函数

属性名	类型	作用	参数
clicked	Function	组件点击事件	组件实例
activated	Function	点击组件外事件	无
resizing	Function	缩放时事件	object
dragging	Function	拖拽时事件	object
dragstop	Function	拖拽结束事件	object

上述代码效果图

网页中：

下载后：