JS
//canvas加载图片 var canvas_img = document.getElementById("canvas_img"); var ctx_2d = canvas_img.getContext("2d"); img = new Image(); img.src = "images.jpg"; img.onload = function() { var iw = img.width; var ih = img.height; canvas_img.width = iw; canvas_img.height = ih; ctx_2d.drawImage(img,0,0,iw,ih,0,0,iw,ih); ctx_2d.font = 'bold 24px "PingFangSC-Regular","sans-serif","STHeitiSC-Light","新宋体","宋体"'; ctx_2d.fillStyle = '#777'; ctx_2d.textBaseline="top"; ctx_2d.textAlign="center"; ctx_2d.fillText('设置的文字1', 80, 100); ctx_2d.fillText('设置的文字2', 325, 458); //引用的canvas生成的图片地址 var new_img_src; //(1)canvas转换成二进制图片 new_img_src = canvas_img.toDataURL("image/jpg"); //(2)通过AJAX生成图片再调用图片地址 new_img_src = new_img_src.substring(22); var url='canvas_img.php'; $.ajax({ type:'post', url:url, data:{dataimg:dataImg}, beforeSend:function(){ },success:function(str){ new_img_src = str; } }); }
<?php $name = time(); $img = str_replace(' ', '+', $_POST['dataimg']); $img = base64_decode($img); $f = fopen('new/' . $name . '.png', 'w+'); fwrite($f, $img); fclose($f); echo 'new/' . $name . '.png'; ?>