canvas 将html绘制图片生成图片链接

最新推荐文章于 2024-05-10 10:10:22 发布

weixin_34176694

最新推荐文章于 2024-05-10 10:10:22 发布

阅读量1.8k

点赞数

文章标签：数据库 php javascript ViewUI

原文链接：http://www.cnblogs.com/wangfugui/p/10120563.html

版权

废话不多说，直接上代码

其中图片地址换成你的，自己玩儿去吧

<!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="#" alt="">
</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,好兄弟们拿走不谢

转载于:https://www.cnblogs.com/wangfugui/p/10120563.html

weixin_34176694

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
canvas 将html绘制图片生成图片链接

废话不多说，直接上代码其中图片地址换成你的，自己玩儿去吧<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div#a { ...
复制链接

扫一扫