我使用以下代码裁剪图像并将其保存为
this.crop = function(width, height, type) {
var imgInfo = this.imgInfo,
c = this.eles.container,
img = this.eles.img,
original = new Image(),
canvas = document.createElement('canvas');
original.src = img.attr('src');
canvas.width = width;
canvas.height = height;
var w = Math.round(c.width() * (imgInfo.aw / (imgInfo.w * imgInfo.s))),
h = Math.round(c.height() * (imgInfo.ah / (imgInfo.h * imgInfo.s))),
x = Math.round(-parseInt(img.css('left')) * (imgInfo.aw / (imgInfo.w * imgInfo.s))),
y = Math.round(-parseInt(img.css('top')) * (imgInfo.ah / (imgInfo.h * imgInfo.s)));
canvas.getContext('2d').drawImage(original, x, y, w, h, 0, 0, width, height);
return {
width: width,
height: height,
type: type || 'jpeg',
string: canvas.toDataURL("image/" + type || 'jpeg'),
};
};
但当我把它转换成图像，然后上传到服务器时。上传的图像为空白。
为此，我使用save.php文件中的以下代码
<?php
if($_SERVER['REQUEST_METHOD'] == "POST") {
define('UPLOAD_DIR', 'img/catalog/');
$base64 = base64_decode(preg_replace('#^data:image/[^;]+;base64,#', '', $_POST['string']));
$stamp = imagecreatefrompng('img/water.png');
$im = imagecreatefromstring($base64);
ob_start();
$marge_right = 10;
$marge_bottom = 10;
$sx = imagesx($stamp);
$sy = imagesy($stamp);
imagecopy($im, $stamp, imagesx($im) - $sx - $marge_right, imagesy($im) - $sy - $marge_bottom, 0, 0, imagesx($stamp), imagesy($stamp));
$file = UPLOAD_DIR . uniqid() . '.jpg';
header('Content-type: image/');
$success = imagejpeg($im, $file, 100);
imagedestroy($im);
echo "$file";
}
?>
从电脑上一切都很好，但当我从任何移动设备上传图像时，图像都是空白的。当我把它放大到最大尺寸时，一切都很好。
你能告诉我哪里错了吗？
我已经更改了我的脚本。
this.data = function(width, height, filetype) {
var self = this,
imgInfo = self.imgInfo,
c = self.eles.container,
img = self.eles.img;
var original = new Image();
original.src = img.attr('src');
// draw image to canvas
var canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
var w = Math.round((c.width() - (0 * 2)) * (imgInfo.aw / (imgInfo.w * imgInfo.s))),
h = Math.round((c.height() - (0 * 2)) * (imgInfo.ah / (imgInfo.h * imgInfo.s))),
x = Math.round(-(parseInt(img.css('left')) - 0) * (imgInfo.aw / (imgInfo.w * imgInfo.s))),
y = Math.round(-(parseInt(img.css('top')) - 0) * (imgInfo.ah / (imgInfo.h * imgInfo.s)));
canvas.getContext('2d').drawImage(original, x, y, w, h, 0, 0, width, height);
data = {
width: width,
height: height,
image: canvas.toDataURL("image/"+filetype),
filetype: filetype
};
return data;
};
现在它适用于iOS，但我有另一个问题。当我从相机上传照片时，它会自动旋转。