网店系统H5版(七) js利用canvas生成分享图,商品图片+二维码+文字
2020-5-9 12:11:51 星期六
先说下效果: 左边是商品图片, 右边是二维码, 下方是一行文字
调用方法:
1 let text = {text:'xxxx', color:'#ff9900', font:'16px Verdana'}; 2 let obj = new zbImage(); 3 obj.addQRTextToImage('goodsImageUrl', 'QRUrl', text, 'finalImageBoxId', 'imageClassStyle');
js类:
1 //将二维码拼接在图片右边, 并加一行文字在下方 (无圆角处理) 2 //依赖jquery jquery-qrcode 3 this.addQRTextToImage = function (mainImageUrl, qrText, text, parentId, imageClass) 4 { 5 let image = new Image(); 6 image.onload = function () { 7 //创建画布 8 let canvasElement = document.createElement('canvas'); 9 let ctx = canvasElement.getContext('2d'); 10 11 //将画布改为圆角 12 let imageW = image.width; 13 let imageH = image.height; 14 let maxItemWidth = 160; 15 let textHeight = 24; 16 let w = maxItemWidth * 2; //横向两个元素 17 let h = maxItemWidth + textHeight; // 垂直图片+文字 18 19 canvasElement.setAttribute('width', w+'px'); 20 canvasElement.setAttribute('height', h+'px'); 21 22 //将画布变为圆角 23 let r = 10; //半径 24 ctx.beginPath(); 25 ctx.moveTo(r, 0); //左上角弧度,右结束点 26 ctx.lineTo(w-r, 0); //画水平直线,到右上角弧度的开始点 27 ctx.arcTo(w, 0, w, r, r); //画右上角弧度 28 ctx.lineTo(w, h-r); //画垂直线, 到右下角的弧度开始点 29 ctx.arcTo(w, h, w-r, h, r); // 画右下角弧度 30 ctx.lineTo(r, h); // 画水平线, 到左下角弧度开始点 31 ctx.arcTo(0, h, 0, h - r, r); //画左下角弧度 32 ctx.lineTo(0, r); //画垂直线, 到左上角弧度开始点 33 ctx.arcTo(0, 0, r, 0, r); // 画左上角弧度 34 //ctx.strokeStyle="rgba(0,0,0,0.1)"; 35 //ctx.stroke(); 36 ctx.fillStyle= '#ffffff'; 37 ctx.fill(); 38 ctx.clip(); //重要 39 40 //把图像剪切成 imageW*imageW, 然后缩放为 maxItemWidth, 从画布的0,0处开始渲染 41 ctx.drawImage(image, 0, 0, imageW, imageW, 0, 0, maxItemWidth, maxItemWidth); 42 43 //生成商品二维码 44 $('#QR').qrcode({text:qrText,quiet:1}); 45 let canvasQR = document.getElementById('QR').getElementsByTagName('canvas')[0]; 46 47 //将二维码画到右边 48 ctx.drawImage(canvasQR, maxItemWidth, 0, maxItemWidth, maxItemWidth); 49 50 //在下边写上文字 51 //ctx.shadowBlur=2; 52 //ctx.shadowColor="rgba(0,0,0,0.1)"; 53 ctx.font=text['font']; 54 ctx.fillStyle = text['color']; 55 let textTotalW = ctx.measureText(text['text']).width; 56 let startTxtX = (w - textTotalW) / 2; 57 ctx.fillText(text['text'],startTxtX, h-5, maxItemWidth); 58 59 //将图片加入到指定的容器中 60 let img = document.createElement('img'); 61 img.src = canvasElement.toDataURL('image/png'); 62 img.setAttribute('class', imageClass); 63 let box = document.getElementById(parentId); 64 box.innerHTML = ''; 65 box.appendChild(img); 66 //box.style.display = 'block'; 67 }; 68 69 image.src = mainImageUrl; 70 }
