canvas生成图片,AJAX请求获得PHP页面生成的canvas新图

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

<?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';
?> 



你可能感兴趣的:(canvas生成图片,AJAX请求获得PHP页面生成的canvas新图)