如何在JS/jQuery上使用透明背景裁剪JPG和PNG

Question

我正在使用一个名为"jcrop"的插件,它非常好,你可以在这里看到它:

http://howhack.com/crop/demos/crop2.php

问题是这个插件不支持具有透明背景的png.

javascript/jQuery中是否有类似的脚本/插件支持具有透明背景的png？

我需要这个矩形比例为16:9且最终图像总是640x360,这就是为什么我要尝试使用这个"jcrop".

Answer 1

我假设插件通过PHP在服务器上进行图像编辑？如果是这样,您需要进行一些特殊调用以保留PNG图像中的Alpha透明度:

$x = $_GET["x"];
$y = $_GET["y"];
$w = $_GET["w"];
$h = $_GET["h"];

// Load the original image.
$img = imagecreatefrompng($img_path);
imagealphablending($img, true);

// Create a blank canvas for the cropped image.
$img_cropped = imagecreatetruecolor($w, $h);
imagesavealpha($img_cropped, true);
imagealphablending($img_cropped, false);
$transparent = imagecolorallocatealpha($img_cropped, 0, 0, 0, 127);
imagefill($img_cropped, 0, 0, $transparent);

// Crop the image and store the data on the blank canvas.
imagecopyresampled($img_cropped, $img, 0, 0, $x, $y, $w, $h, $w, $h); // or imagecopy()

// Save the image.
imagepng($img_cropped, "image_cropped.png", 2);

// Free memory.
imagedestroy($img);
imagedestroy($img_cropped);

这是()触及了几次讨论了PHP的imagecopyresampled 这里.