网店系统H5版(七) js利用canvas生成分享图,商品图片+二维码+文字

2020-5-9 12:11:51 星期六

网店系统介绍

先说下效果: 左边是商品图片, 右边是二维码, 下方是一行文字

调用方法: 

let text = {text:'xxxx', color:'#ff9900', font:'16px Verdana'};
let obj = new zbImage();
obj.addQRTextToImage('goodsImageUrl', 'QRUrl', text, 'finalImageBoxId', 'imageClassStyle');

js类:

    //将二维码拼接在图片右边, 并加一行文字在下方 (无圆角处理)
    //依赖jquery jquery-qrcode
    this.addQRTextToImage = function (mainImageUrl, qrText, text, parentId, imageClass)
    {
        let image = new Image();
        image.onload = function () {
            //创建画布
            let canvasElement = document.createElement('canvas');
            let ctx = canvasElement.getContext('2d');

            //将画布改为圆角
            let imageW = image.width;
            let imageH = image.height;
            let maxItemWidth = 160;
            let textHeight = 24;
            let w = maxItemWidth * 2; //横向两个元素
            let h = maxItemWidth + textHeight; // 垂直图片+文字

            canvasElement.setAttribute('width', w+'px');
            canvasElement.setAttribute('height', h+'px');

            //将画布变为圆角
            let r = 10; //半径
            ctx.beginPath();
            ctx.moveTo(r, 0); //左上角弧度,右结束点
            ctx.lineTo(w-r, 0); //画水平直线,到右上角弧度的开始点
            ctx.arcTo(w, 0, w, r, r); //画右上角弧度
            ctx.lineTo(w, h-r); //画垂直线, 到右下角的弧度开始点
            ctx.arcTo(w, h, w-r, h, r); // 画右下角弧度
            ctx.lineTo(r, h); // 画水平线, 到左下角弧度开始点
            ctx.arcTo(0, h, 0, h - r, r); //画左下角弧度
            ctx.lineTo(0, r); //画垂直线, 到左上角弧度开始点
            ctx.arcTo(0, 0, r, 0, r); // 画左上角弧度
            //ctx.strokeStyle="rgba(0,0,0,0.1)";
            //ctx.stroke();
            ctx.fillStyle= '#ffffff';
            ctx.fill();
            ctx.clip(); //重要

            //把图像剪切成 imageW*imageW, 然后缩放为 maxItemWidth, 从画布的0,0处开始渲染
            ctx.drawImage(image, 0, 0, imageW, imageW, 0, 0, maxItemWidth, maxItemWidth);

            //生成商品二维码
            $('#QR').qrcode({text:qrText,quiet:1});
            let canvasQR = document.getElementById('QR').getElementsByTagName('canvas')[0];

            //将二维码画到右边
            ctx.drawImage(canvasQR, maxItemWidth, 0, maxItemWidth, maxItemWidth);

            //在下边写上文字
            //ctx.shadowBlur=2;
            //ctx.shadowColor="rgba(0,0,0,0.1)";
            ctx.font=text['font'];
            ctx.fillStyle = text['color'];
            let textTotalW = ctx.measureText(text['text']).width;
            let startTxtX = (w - textTotalW) / 2;
            ctx.fillText(text['text'],startTxtX, h-5, maxItemWidth);

            //将图片加入到指定的容器中
            let img = document.createElement('img');
            img.src = canvasElement.toDataURL('image/png');
            img.setAttribute('class', imageClass);
            let box = document.getElementById(parentId);
            box.innerHTML = '';
            box.appendChild(img);
            //box.style.display = 'block';
        };

        image.src = mainImageUrl;
    }