1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>Document</title> 6 </head> 7 <body> 8 ????<canvas id="canvas" width="500" height="500"></canvas> 9 10 ????<script>11 ????????var canvas = document.createElement(‘canvas‘);12 ????????var ctx = document.getElementById(‘canvas‘).getContext(‘2d‘);13 14 ????????ctx.beginPath();15 ????????ctx.strokeStyle = ‘red‘;16 ????????ctx.moveTo(100, 100);17 ????????ctx.lineTo(100, 200);18 ????????ctx.stroke();19 20 ????????var img = new Image();21 ????????img.src = ‘1.png‘;22 ????????img.onload = function(){23 ????????????ctx.drawImage(img, 100, 100, 150, 100);24 ????????};25 ????????var base64_url = canvas.toDataURL(‘image/jpeg‘, 0.5);26 ????</script>27 </body>28 </html>使用canvas输出base64_url
原文地址：https://www.cnblogs.com/souleigh-hong/p/9056011.html