js canvas實現(xiàn)二維碼和圖片合成的海報
本文實例為大家分享了canvas二維碼和圖片合成海報的具體代碼,供大家參考,具體內(nèi)容如下
思路:在微信中登錄,后臺傳來的是一個鏈接、一個名字、一張圖片。把圖片當做背景,畫滿整個畫布。之后需要把鏈接轉(zhuǎn)為二維碼,使用jq.qrcode轉(zhuǎn)化,轉(zhuǎn)化完成后是一個canvas,把這個canvas再轉(zhuǎn)成一張圖片,畫到大的畫布上。把名字畫到畫布上。把整張畫布轉(zhuǎn)為圖片。
一、定義畫布和合成海報的img
<style type="text/css"> #canbox { width: 100%; height: 100%; position: fixed; top: 0; bottom: 0; left: 0; } .canimg { width: 100%; height: 100%; position: fixed; top: 0; bottom: 0; left: 0; } </style>
<div id="qrcode"> </div> <div id="canbox"> <canvas id="myCanvas" width="" height=""></canvas> </div> <img class="canimg" src=""/>
二、用jquery.qrcode把網(wǎng)址變成二維碼
后臺傳過來的是網(wǎng)址,需要轉(zhuǎn)為二維碼,二維碼也是canvas,需要把二維碼轉(zhuǎn)為圖片
$("#qrcode").qrcode({ width: 72, //寬度 height: 72, //高度 text: res.data.poster_qrcode, //任意內(nèi)容 });
三、把圖片畫到畫布上,需要占滿全屏
//畫海報 var width = document.getElementById("canbox").offsetWidth; //寬度 var height = document.getElementById("canbox").offsetHeight; // 高度 var c = document.getElementById("myCanvas"); c.width = width c.height = height var ctx = c.getContext("2d"); //首先畫上背景圖 var img = new Image(); img.src = this.list.poster; img.setAttribute("crossOrigin", 'Anonymous') var x_bot = height - 44 //畫上名字 ctx.font = "19px Georgia";
//畫上二維碼 function convertCanvasToImage(canvas) { var image = new Image(); image.src = canvas.toDataURL("image/png"); return image; } var mycans = $('canvas')[1];//二維碼所在的canvas var codeimg = convertCanvasToImage(mycans) var xw = width - 72 - 29 var xh = height - 6 - 72
img.onload = function() { //必須等待圖片加載完成 ctx.drawImage(img, 0, 0, width, height); //繪制圖像進行拉伸 ctx.fillText(that.name, 28, x_bot); ctx.drawImage(codeimg, xw, xh, 72, 72); //繪制完成,轉(zhuǎn)為圖片 setTimeout(function() { //在ios上無法在畫完之后取到整個畫布內(nèi)容,加了個settimeout var bigcan = $('canvas')[0]; let images = new Image(); images.src = bigcan.toDataURL("image/png"); alert(bigcan.toDataURL("image/png")) images.setAttribute("crossOrigin", 'Anonymous') $('.canimg').attr('src', bigcan.toDataURL("image/png")) }, 0) }
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript實現(xiàn)動態(tài)導(dǎo)入js與css等靜態(tài)資源文件的方法
這篇文章主要介紹了javascript實現(xiàn)動態(tài)導(dǎo)入js與css等靜態(tài)資源文件的方法,基于回調(diào)函數(shù)實現(xiàn)該功能,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07javascript實現(xiàn)10個球隨機運動、碰撞實例詳解
這篇文章主要介紹了javascript實現(xiàn)10個球隨機運動、碰撞的方法,實例分析了javascript實現(xiàn)小球碰撞的原理與實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07js技巧之十幾行的代碼實現(xiàn)vue.watch代碼
相信很多的用vue的人都知道vue雙向綁定的原理建立在,給屬性綁定了getter和setter,在屬性被改變的同時觸發(fā)視圖的再渲染。而本期也是借助這兩個內(nèi)置方法實現(xiàn)vue內(nèi)的watch2018-06-06JS基于ocanvas插件實現(xiàn)的簡單畫板效果代碼(附demo源碼下載)
這篇文章主要介紹了JS基于ocanvas插件實現(xiàn)的簡單畫板效果,結(jié)合實例形式分析了ocanvas插件實現(xiàn)畫板的相關(guān)技巧,并附代碼demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04