vue项目引用美图秀秀图片编辑器

vue引用美图秀秀图片编辑器

1.设置crossdomain.xml
下载crossdomain.xml文件，把解压出来的crossdomain.xml文件放在您保存图片或图片来源的服务器根目录下，
比如： http://example.com.cn，那么crossdomain.xml的路径为：http://example.com.cn/crossdomain.xml。
需要注意的是crossdomain.xml必须部署于站点根目录下才有效， crossdomain.xml的目的是授权来自美图域下的flash向您的站点上传图片或者从您的站点加载图片。
【备注】由于本地测试会被flash安全沙箱拦住，请自行搭建web服务器，在web 环境中测试。

我的项目是放在本地的apache下的
所以xml文件放在www下

2.在vue项目的index.html引入在线的js

3.将image_upload_streaming.php放在www内项目下

image_upload_streaming.php代码如下

 0 ) {
	$filename = $save_path . '/static/lib/image/' . uniqid() . '.jpg';  //图片保存到www项目内的/static/lib/image内，得先建image文件夹
	$handle = fopen( $filename, 'w+' );
	fwrite( $handle, $postdata );
	fclose( $handle );
	if ( is_file( $filename ) ) {
		echo '保存成功' . $filename;
		exit ();
	}else {
		die ( 'Image upload error!' );
	}
}else {
	die ( 'Image data not detected!' );
}

4.编辑美图秀秀的vue页面

完成后大功告成，效果图如下：

美图秀秀web开放平台