Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何在JS / jQuery上实现透明背景的JPG和PNG的裁剪

如何在JS / jQuery上实现透明背景的JPG和PNG的裁剪
EN

Stack Overflow用户
提问于 2011-09-09 23:04:37
回答 2查看 6.4K关注 0票数 0

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

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

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

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

我需要这个长宽比为16:9的矩形,最终的图像总是640x360,这就是为什么我尝试使用这个"jcrop“。

EN

回答 2

Stack Overflow用户

发布于 2011-09-09 23:25:11

我假设这个插件通过PHP在服务器上进行图像编辑?如果是这样的话,你需要做一些特殊的调用来保持PNG图像中的alpha透明度:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$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() here时,有几次涉及到这一点。

票数 6
EN

Stack Overflow用户

发布于 2011-09-09 23:21:54

使用canvas可以轻松得多,如果您想保存它,只需通过post - http://www.nihilogic.dk/labs/canvas2image/将原始canvas数据发送到服务器

但是如果你想使用这个插件,我建议你看看你的服务器的php配置。许多服务器仍然只支持jpeg和gif作为其默认php配置的一部分。如果你想检查这一点,创建一个php文件,其中包含以下代码:

phpinfo();

?>

然后上传并在您的服务器上查看。您应该在页面上查找"libpng“:http://www.php.net/manual/en/image.requirements.php

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/7368346

复制
相关文章
C#*.bmp,*.jpg,*.png指定颜色,转换为透明背景的png[通俗易懂]
partial class Form1 { /// /// private System.ComponentModel.IContainer components = null;
全栈程序员站长
2022/09/13
3.9K0
C#*.bmp,*.jpg,*.png指定颜色,转换为透明背景的png[通俗易懂]
python把png的白色背景变透明
一、讲解部分 1、PNG 有 PNG-8,PNG-24 和 PNG-32 三种格式 PNG-8 PNG-8将图片中用到的每种颜色都存储在一个长度为255的数组中,称之为条色盘,然后每个像素上存储对应颜色在条色盘上的位置。 因为颜色上限是255种,所以每个像素只需要8bits就可以表示对应的颜色信息。这种表示颜色的方式也被称之为索引色。 相比之下确实使用了更少的空间来存储颜色,但是他能表达的颜色种类也是有上限的,所以在将PNG-32转换成PNG-8时会在一些颜色过渡的地方看到明显的不平滑的渐变 PNG-24
Elsa_阿尼
2021/07/15
5.7K1
python把png的白色背景变透明
java对PNG图片圆角处理 保持PNG透明背景
/* * 圆角处理 * @param BufferedImage * @param cornerRadius * */ public static String makeRoundedCorner(String srcImageFile, String result, String type, int cornerRadius) {     try {         BufferedImage image = ImageIO.read(new File(srcImageFile));         in
用户8983410
2021/09/23
1.1K0
IE6下的png透明图片的背景定位
在IE6下PNG透明图片做背景,无法使用background-position进行定位。但是可以使用margin和绝对定位来进行。 另外,由于IE6下的 :hover 只对<a>支持,对其他元素都不起作用,所以需要对IE6单独打补丁。可以使用微软提供的 csshover.htc文件进行修复。 <ul class="nav"> <li> <a href="void 0" class="a"><img class="i1" src="img/png_btn.png"><
欲休
2018/03/15
1K0
PHP将png透明背景图片转换为白色背景
前一篇文章中,刚介绍了如何读取PDF文件并转换为png图片,最终图片能正常生成,但遇到了一个问题,生成的图片背景是透明的,那么如何将透明的图片转换为白色背景呢?
用户8851537
2021/08/19
2.5K0
PHP将png透明背景图片转换为白色背景
前一篇文章中,刚介绍了如何读取PDF文件并转换为png图片,最终图片能正常生成,但遇到了一个问题,生成的图片背景是透明的,那么如何将透明的图片转换为白色背景呢?
Petrochor
2022/06/07
8430
png在线转化为ico图标,并保留透明背景
先看效果图,png 转化为 ico,非常简单!在线转化一下搞定,而且质量有保障!
小蓝枣
2020/09/25
2.9K0
png在线转化为ico图标,并保留透明背景
将png格式的图像转换为jpg
import osfrom PIL import Imagedirname_read="D:\dataset\cityscapes\cityscape_voc_clean\JPEGImages_png\\"dirname_write="D:\dataset\cityscapes\cityscape_voc_clean\JPEGImages_jpg\\"names=os.listdir(dirname_read)count=0for name in names: img=Image.open(dirna
狼啸风云
2020/07/16
2.3K0
Python将PDF转成图片PNG和JPG
前言:在最近的测试中遇到一个与PDF相关的测试需求,其中有一个过程是将PDF转换成图片,然后对图片进行测试。
软测小生
2019/08/06
15.5K0
Python将PDF转成图片PNG和JPG
JPG、PNG、SVG 和 WEBP 格式图片的业务场景对比
一、JPG 有损压缩,压缩率高 不支持透明 适用于不需要透明图片的业务场景 二、PNG 支持透明 浏览器兼容性好 适用于需要透明图片的业务场景 三、SVG 矢量图,代码内嵌,相对较小 适用于图片样式相对简单的场景 四、WEBP 压缩程度好 但在 ios webview 有兼容性问题  适用于安卓
Leophen
2020/04/17
1.7K0
BMP、GIF、TIFF、PNG、JPG和SVG格式图像的特点
一张图片可以储存为多种格式,为什么有的几十KB,有的几百MB,有的静止不动,有的是好几个画面循环播放?在项目开发的过程中经常会读取或保存图像文件,不同类型的图像特点不同,适用的范围也不同,简要介绍BMP、GIF、TIFF、PNG、JPG和SVG格式图像的特点。
不脱发的程序猿
2021/01/20
4.3K0
如何转换png图片为jpg图片
最近在工作中会遇到需要将 png 图片转换为 jpg 图片的需求,主要原因也是 png 图片占的空间太大,如果图片数量上万张,可能就需要十几G的存储空间,所以希望转换为更小的 jpg 图片。
kbsc13
2020/04/23
3.5K0
如何转换png图片为jpg图片
css实现背景半透明文字不透明的效果
图片.png <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> html{ background: #6a8db1; } .aside{ background-color:rgba(
王小婷
2018/05/31
1.3K0
基于jquery的imgAreaSelect.js插件+JAVA后台实现图片裁剪保存功能
哎_小羊
2018/01/02
6.1K1
基于jquery的imgAreaSelect.js插件+JAVA后台实现图片裁剪保存功能
sublime实现背景透明化
预览 老司机们就不要吐槽背景图了 实现方法 首先下载插件,直接打包下载zip即可 地址:https://github.com/vhanla/SublimeTextTrans 下载完成后解压到pa
attack
2018/09/30
1.4K0
sublime实现背景透明化
Flash背景透明的代码
      我觉得这个应该不是太难,结果DW中死活设置不成功,网上搜索到的都是一些互相抄了抄去的不知所云的东西,懒得去学习研究,还不如在自己原来做过的网站中找代码,一试便成了。就是这个了: <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" widt
用户1075292
2018/01/23
1.2K0
使用BitBlt实现位图背景透明
BOOL BitBlt(int x, int y, int nWidth,nHeight, CDC* PsrcDC, int xSrc, int ySrc, DWORD dwRop);
全栈程序员站长
2022/11/02
1.4K0
使用BitBlt实现位图背景透明
点击加载更多

相似问题

用透明背景的PNG合并JPG图像

17

TWICImage:如何在JPG上覆盖透明的PNG?

11

JPG w白色背景而不是透明的PNG

20

PHP,全彩色JPG上的透明PNG

13

在imagemagick中从png到jpg的透明背景

30
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文