متغیر والی تصویر بنائیں جس کو محفوظ اور شیئر کیا جاسکے

Generate Picture With Variables That Can Be Saved



HTML صفحہ

جے ایس

var _canvasWidth = 750 // Canvas width var _canvasHeight = 1334 // Canvas height var c = document.getElementById ('helpcanvas') // Get the canvas ID c.width = _canvasWidth // Canvas width c.height = _canvasHeight canvas height var ctx = c.getContext('2d') var img = new Image() img.crossOrigin = 'anonymous' img.src = '/vendor/pc/images/mobile/help/bg.png' // Start drawing img.onload = function () { ctx.drawImage(img, 0, 0, _canvasWidth, _canvasHeight) ctx.save() var imgu = new Image() var imguSrc = $('.headimgurl').text() imgu.crossOrigin = 'anonymous' imgu.src = imguSrc imgu.onload = function () { var width = 100 var height = 100 var circle = { x: width / 2, y: height / 2, r: width / 2 } var imgx = 60 var imgy = 50 ctx.fillStyle = 'rgba(0,0,0,0)' ctx.fillRect(imgx, imgy, width, height) ctx.save() ctx.beginPath() ctx.arc(circle.x + imgx, circle.y + imgy, circle.r, 0, Math.PI * 2, false) ctx.clip() ctx.drawImage(imgu, imgx, imgy, width, height) ctx.restore() var username = $('.nickname').text() ctx.font = '40px Arial,Helvetica,sans-serif' ctx.fillStyle = '#000' ctx.fillText(username, 180, 110) ctx.save() ctx.font = '34px Arial,Helvetica,sans-serif' ctx.textAlign = 'center' ctx.fillText ('Identify the QR code to help me get free courses', 375, 200) var imgc = new Image() var imgcSrc = $('.qrcode').text() console.log(imgcSrc) imgc.crossOrigin = 'anonymous' imgc.src = imgcSrc imgc.onload = function () { ctx.drawImage(imgc, 225, 240, 300, 300) ctx.font = '30px Arial,Helvetica,sans-serif' ctx.textAlign = 'center' ctx.fillStyle = '#666666' ctx.fillText ('(Need 5 friends to help)', 375, 600) ctx.save() ctx.font = '32px Arial,Helvetica,sans-serif' ctx.textAlign = 'center' ctx.fillStyle = '#000000' ctx.fillText (username + 'desired course', 375, 740) var imgt = new Image() imgt.crossOrigin = 'anonymous' imgt.src = '/vendor/pc/images/mobile/year_members.png' imgt.onload = function () { ctx.drawImage(imgt, 151, 770, 448, 336) ctx.save() ctx.font = '36px Arial,Helvetica,sans-serif' ctx.textAlign = 'center' ctx.fillStyle = '#000000' ctx.fillText ('Corporate Nine Module Landing Course Tools', 375, 1160) ctx.font = '30px Arial,Helvetica,sans-serif' ctx.textAlign = 'center' ctx.fillStyle = '#000000' ctx.fillText ('Price: ¥ 99.00', 375, 1250) var _imgSrc = c.toDataURL ('image / jpg', 1) // Change canvas to image link c.style.display = 'none' var helpcanvasshow = document.getElementById ('helpcanvasshow') // Get ID of img helpcanvasshow.setAttribute ('src', _imgSrc) assign the canvas link to img } } } } }