84669 personnes étudient
152542 personnes étudient
20005 personnes étudient
5487 personnes étudient
7821 personnes étudient
359900 personnes étudient
3350 personnes étudient
180660 personnes étudient
48569 personnes étudient
18603 personnes étudient
40936 personnes étudient
1549 personnes étudient
1183 personnes étudient
32909 personnes étudient
就是上传图片,然后预览生成data:image/jpg...那样路径的图片。应该是html5生成的。然后想在这个图片下面加个文字,然后再生成图片出来。想问怎么做?有实例参考好哈,谢谢了!
ringa_lee
实现思路:base64Image -> 导入canvas -> 添加水印 -> 生成base64Image
base64Image
导入canvas
添加水印
生成base64Image
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"> <title>Document</title> </head> <body> <fieldset> <legend>canvas</legend> <canvas id="canvas"></canvas> </fieldset> <fieldset> <legend>image</legend> <img src="http://userimg.yingyonghui.com/head/24/1458708838143/5426424.png-thumb" alt="" id="xxx"> </fieldset> <script type="text/javascript"> var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); canvas.width = 256; canvas.height = 256; var image = new Image(); // 引用外部图片,需设置 crossOrigin 属性,否则 toDataURL 调用异常 image.setAttribute('crossOrigin', 'anonymous'); image.onload = function (){ context.drawImage(image, 0, 0); context.font = '16px Arial'; context.fillStyle = '#fff'; context.fillText('水印文本 - 火影忍者', 105, 245); context.beginPath(); context.lineWidth = 10; context.strokeStyle = '#ff5900'; context.moveTo(0, 0); context.lineTo(256, 0); context.lineTo(256, 256); context.lineTo(0, 256); context.lineTo(0, 0); context.stroke(); // 最终生成的图片 base64 字符串 var base64Image = canvas.toDataURL(); document.getElementById('xxx').src = base64Image; // console.log(base64Image); }; // 将 src 换成 base64 字符串 image.src = 'http://userimg.yingyonghui.com/head/24/1458708838143/5426424.png-thumb'; </script> </body> </html>
实现思路:
base64Image
->导入canvas
->添加水印
->生成base64Image