話不多說，只是想分享踩坑的經驗，若有不好，請諒解
//想看實際效果的話，可以關注公眾號“捧場客”，商品詳情里面分享，是海報合成，可以研究下

//若不嫌棄，可以直接拿過去復制，只需要改成自己的圖片地址就行
//記住二維碼需要動態計算寬高
//html代碼

<div id="qrcode"></div><div id="canbox"><canvas id="myCanvas" width="" height=""> <img src=""></canvas></div><img class="canimg" src="" />

//引入js

這個js很重要哦，百度都有 <script src="js/qrcode.min.js" type="text/javascript" charset="utf-8"></script>

//然后生成二維碼

//這里的data是你要生成二維碼的連接function getQrOrderFunc(data) {console.log('二鏈接:', data)new QRCode('qrcode', {text: data,width: 120,height: 120,correctLevel: QRCode.CorrectLevel.M}); // 設置要生成二維碼的鏈接}

//接下來就開始畫畫

//畫海報var width = document.getElementById("canbox").offsetWidth; //寬度 var height = document.getElementById("canbox").offsetHeight; // 高度var c = document.getElementById("myCanvas");c.width = widthc.height = heightvar ctx = c.getContext("2d");//首先畫上背景圖var img = new Image();img.setAttribute("crossOrigin", 'Anonymous')img.src = imgUrl; //獲取圖片地址var devicePixelRatio = window.devicePixelRatio || 1,backingStoreRatio = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio ||ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1,ratio = devicePixelRatio / backingStoreRatio;c.width = width * ratio;c.height = canvasheight * ratio;c.style.width = width + 'px';c.style.height = canvasheight + 'px';ctx.scale(ratio, ratio);//進行正常的操作// context.drawImage()//畫上二維碼function convertCanvasToImage(canvas) {var image = new Image();image.src = canvas.toDataURL("image/png");return image;}var mycans = $('canvas')[0]; //二維碼所在的canvas// console.log('mycans:',mycans)var codeimg = convertCanvasToImage(mycans)// console.log('codeimg:',codeimg)// var xw = 250.0 / 375.0 * width// var xh = 456.0 / 570.0 * canvasheightvar xw = 250.0 / 375.0 * widthvar xh = 456.0 / 570.0 * canvasheight + 15let w = 90.0 / 375.0 * widthif (xw + w > width) {xw = width - w - 20}if (xh + w > canvasheight) {xh = canvasheight - w}img.onload = function() { //必須等待圖片加載完成ctx.drawImage(img, 0, 0, width, canvasheight); //繪制圖像進行拉伸ctx.drawImage(codeimg, xw, xh, w, w);// alert(2)setTimeout(function() { //在ios上無法在畫完之后取到整個畫布內容，加了個settimeoutlet images = new Image();images.setAttribute("crossOrigin", 'Anonymous')var bigcan = document.getElementById("myCanvas");var base64 = bigcan.toDataURL("image/png");// alert(5)$('.canimg').attr('src', base64)// completeLoading()// alert(6)loadingFunc.removeLoading()}, 0)}

總結

以上是生活随笔為你收集整理的canvas实现背景图和二维码合并-生成海报的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。