canvas 將html繪制圖片 生成圖片鏈接
阿新 • • 發佈：2018-12-14
分享 技術分享 meta div 圖片 asc ext raw 屏幕
廢話不多說，直接上代碼
其中圖片地址換成你的，自己玩兒去吧
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div#a {
width: 1105px;
height: 500px;
margin: 0 auto;
border: 0px solid;
}
</style>
</head>
<body>
<div>
<canvas id="canvas"></canvas>
</div>
<div>
<img id="img" style="width: 100%;height: 100%" src="#" >
</div>
</body>
</html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
//指定canvas同頁面長寬一樣
var H = $(window).height();
var W = $(window).width();
$("#canvas").attr({‘height‘:H,‘width‘:W});
//設置canvas跟屏幕一樣大小
//canvas繪圖
function draw(){
var canvas = document.getElementById(‘canvas‘);
var h = H/100;//百分1的高
var w = W/100;//百分1的寬
var ctx = canvas.getContext("2d");
var imgBg = new Image();
imgBg.src = ‘img/banner_bg.png‘
var img1 = new Image();
img1.src = ‘img/b631fc34b1563f7ab0af948e5bd8d19e.jpg‘;
window.onload = function(){
ctx.drawImage(imgBg,0,0,750,1208,0,0,W,H)
ctx.drawImage(img1,0,0,600,500,400,200,500,500)//設置圖片比例和位置,匹配手機屏幕
//繪制簡單的文字
ctx.fillStyle = "rgba( 0, 0, 0, 1)"; // black color
ctx.font="40px Arial";
ctx.fillText("托尼斯塔克",100,300);
//生成的data的路徑,可以通過php生成圖片存到數據庫,單存data路徑不合適,高清圖片情況下會出現圖片的殘缺
var srccc = canvas.toDataURL("image/png");
console.log(srccc)
$("#img").attr("src",srccc);
}
}
draw();
</script>
如下圖：上邊為canvas繪制的圖片，下邊是有canvas生成的圖片鏈接（<img src=" "/>）
ok,好兄弟們拿走不謝
canvas 將html繪制圖片 生成圖片鏈接