- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
Stackoverflow 上的新功能。我正在研究一个解决方案,我可以在服务器上使用 jcrop 将裁剪后的图像保存为 .jpg 文件。该图像还用作立方体表面上的纹理(我为此使用了 three.js)。我不是一个专业的coder,但是我已经成功的把surface的图片拿到服务器上了。
但是,不幸的是,这些文件始终具有 96 DPI 分辨率并且质量很差(即使是 2000px X 2000px 分辨率)。我试图找到解决方案,但我仍然希望找到更现代的东西。例如,我听说过 toDataURLHD
方法。我试过了,但没用。
这是我用于服务器上传的 Javascript 代码:
function saveIt(){
var data_image_1=$('#img_front1_CANVAS_PREVIEW')[0].toDataURL('image/jpeg');
var postData = "canvasData="+data_image_1;
var ajax = new XMLHttpRequest();
ajax.open("POST",'upload.php',true);
ajax.setRequestHeader('Content-Type', 'canvas/upload');
ajax.onreadystatechange=function()
{
if (ajax.readyState == 4)
{alert("image saved");}
}
ajax.send(postData);
}
PHP 部分:
if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{
$rawImage=$GLOBALS['HTTP_RAW_POST_DATA'];
$removeHeaders=substr($rawImage, strpos($rawImage, ",")+1);
$decode=base64_decode($removeHeaders);
$fopen = fopen( 'uploads/myImage.jpg', 'wb' );
fwrite( $fopen, $decode);
fclose( $fopen );
}
代码有效,我在服务器上获取了图像,但质量很差:
有什么办法可以提高dpi吗?
编辑:
我的代码有点复杂,因为我使用了外部资源。例如, Canvas 标签是“隐藏”的。这里还有一些上传程序的代码。
HTML:
<!--Upload Button-->
<img class="email-avatar" id="img_front1" height="64" width="64" src="img.png">
<!--Opens a popup, where the picture is being cropped-->
<div id="popup" class="popup">
<img src="" id="target" alt="Flowers" />
<button onclick="javascript:$.modal.close();" class="pure-button primary-button" id="Ready">Ready</button>
</div>
<!--After the cropping this function is called-->
<script>
// icon image search
jQuery(document).ready(function($){
Iconcontroller('img_front1',2000,2000,0);
});
</script>
所以在这里我找不到任何 Canvas 标签。但我知道,它是生成的,我在“Iconcontroller”函数内的 .js 文件中找到了它。
编辑 2:
我想我找到了应该修改的部分。我尝试了 canvas.width=img.width*300/96
方法,但有些东西不起作用。也许代码不在正确的位置。
这里是完整的代码。关注RESIZING AND UPLOAD
和update image canvas
部分:
Javascript:
function Iconcontroller(OBJ_ICON_ID,SIZE_W,SIZE_H,SIZES_WH,FUNCTIONCALLBACK){
// CONSTANTS AUX
var NAME_OBJECT_CONTROL=OBJ_ICON_ID;
var NAME_FILE_INPUT=NAME_OBJECT_CONTROL+'_FILES_INPUT';
var NAME_PREVIEW_CANVAS=NAME_OBJECT_CONTROL+'_CANVAS_PREVIEW';
var NAME_TARGET_IMG='target';
var NAME_POPUP_HTML='popup';
var SIZE_W=SIZE_W;
var SIZE_H=SIZE_H;
var SIZES_WH=SIZES_WH;
$( "#"+NAME_OBJECT_CONTROL).after( '<input name="'+NAME_FILE_INPUT+'" style="display:none" id="'+NAME_FILE_INPUT+'" type="file" accept="image/jpeg,image/png,image/gif" />' );
$( "#"+NAME_OBJECT_CONTROL).after( '<canvas id="'+NAME_PREVIEW_CANVAS+'" style="display:none"></canvas>' );
$('#'+NAME_OBJECT_CONTROL).click(
function(){
$('#'+NAME_FILE_INPUT).val("");
$('#'+NAME_FILE_INPUT).click();
});
$('#'+NAME_FILE_INPUT).change(function(e) {
var file = e.target.files[0];
ProcessImage(file,NAME_PREVIEW_CANVAS,NAME_TARGET_IMG,NAME_POPUP_HTML,SIZE_W,SIZE_H,SIZES_WH,FUNCTIONCALLBACK);
});
}
function modal(NAME_POPUP_HTML){
$("#"+NAME_POPUP_HTML).modal({escapeClose: true,clickClose: true,showClose: true});
}
//PROCESS AND RESIZE FUNCTION
function ProcessImage(file,NAME_PREVIEW_CANVAS,NAME_TARGET_IMG,NAME_POPUP_HTML,SIZE_W,SIZE_H,SIZES_WH,FUNCTIONCALLBACK){
var NAME_PREVIEW_CANVAS=NAME_PREVIEW_CANVAS;
var NAME_TARGET_IMG=NAME_TARGET_IMG;
var NAME_POPUP_HTML=NAME_POPUP_HTML;
var SIZE_W=SIZE_W;
var SIZE_H=SIZE_H;
//RESIZING AND UPLOAD
canvasResize(file, {
width: 710,
height: 470,
crop: false,
quality:100,
rotate: 0,
callback: function(data, width, height) {
// resizing img
var span = $('#'+NAME_TARGET_IMG).attr('src',data);
// detect crop
jcrop_obj= $('#'+NAME_TARGET_IMG).data('Jcrop');
// show popup
$("#"+NAME_POPUP_HTML).modal({
escapeClose: true,
clickClose: true,
showClose: true
});
// si existe para cambiar el crop
if (jcrop_obj != null) {$('#'+NAME_TARGET_IMG).data('Jcrop').destroy()}
if(SIZES_WH!=1){SIZES_WH=SIZE_W /SIZE_H;}
else{SIZES_WH=0;}
// crea el jcrop for image
$('#'+NAME_TARGET_IMG).Jcrop({
aspectRatio: SIZES_WH,
onChange : updatePreview,
onSelect : updatePreview,
setSelect: [ 0, 0, SIZE_W, SIZE_H]
});
// update image canvas
function updatePreview(c) {
if(parseInt(c.w) > 0) {
var imageObj = $("#"+NAME_TARGET_IMG)[0];
// Show image preview
var canvas = $("#"+NAME_PREVIEW_CANVAS)[0];
canvas.width = SIZE_W*300/96;
canvas.height = SIZE_H*300/96;
var context = canvas.getContext("2d");
context.drawImage(imageObj, c.x, c.y, c.w, c.h, 0, 0, SIZE_W*300/96, SIZE_H*300/96);
}
if(FUNCTIONCALLBACK){FUNCTIONCALLBACK();}
};
}
});
}
我还用代码创建了一个 ZIP 文件,因为有一些库。 Here is the link.
编辑 3:
不知道 markE 的答案去了哪里,但无论如何。解决方案很好,我希望我能设法将它实现到我的代码中。谢谢你的努力,我真的很感激,因为我是新来的,甚至没想到会得到任何答复。 :)
最佳答案
您需要更多像素才能获得足够的打印机分辨率。
一种方法(如 Blindman67 所说)是从原始图像裁剪并让打印机放大到所需的像素数。
您也可以手动添加像素...
方法如下:
如果您需要添加像素,您可以创建更大的第二个 Canvas ,并使用 drawImage 的缩放版本进一步放大裁剪部分。如果原始图像的分辨率不是打印机分辨率,您可能需要使用此技术。
function scaleUp(img,scale){
var w=img.width*scale;
var h=img.height*scale;
var c=document.createElement('canvas');
cctx=c.getContext('2d');
c.width=w;
c.height=h;
cctx.drawImage(img,0,0,img.width,img.height,0,0,w,h);
var img1=new Image();
img1.src=c.toDataURL('image/jpeg',100);
document.body.appendChild(img1);
}
关于javascript - 将 Canvas 作为 jpg 文件保存到服务器时如何增加 DPI?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35945336/
我的目录中有一堆图像(100+),它们的名称都不同。有什么方法可以将它们重命名为 0.jpg、1.jpg、2.jpg 等,可能使用脚本(我运行的是 Windows),而不必单独重命名每个文件?如果在
文件的顺序由可以嵌入文件名中的数字确定,但有时嵌入在名称的开头,例如文件1.txt文件2.txt文件3.txt文件10.txt文件11.txtETC..或者1.txt2.txt10.txt等. 重命名
我有一个 inotify 等待脚本,只要检测到文件已上传到源目录,它就会将文件从一个位置移动到另一个位置。 我面临的挑战是我需要保留文件的基本名称并将以下扩展名:.JPEG、.JPG、.jpeg 转换
我有一段代码可以上传图像并创建缩略图,只要扩展名是小写的 jpg,但如果是大写的 JPG,它就不会上传图像。当我重命名图像时,例如example.JPG 到 example.jpg,它会上传。但是 e
我必须缩小和解压缩一组大小为 4608 x 3456 的 JPG 图像。目前,我已经能够将图像正确解压缩为 RGB 格式并将它们转换为位图。 现在我需要实现缩小,根据我目前所读到的正确缩小图像的内容,
这个问题困扰我好久了。我正在尝试在 PHP 中加载图像,但是有 jpg 和 JPG 图像,当我尝试通过 jpg 加载图像时,找不到 JPG 图像(显然) $img1 = ''; $img2 = '';
我使用这个函数来检测我的文件是否存在。虽然我有一些图像存储为 .jpg、.JPG、.png 和 .PNG。但即使真实文件的扩展名为 .JPG 或 .PNG,它也总是将 .jpg 或 .png 返回为真
我有很多这样的文件: 13040-3BLK1.JPG 13040-3NAV11.JPG 13040-50NAV11.JPG 13040-60NAV11.JPG 13040-LNAV1.JPG
我在机器人上安装了摄像头。长话短说,相机输出二进制数组,我相信这是一个 JPG 编码流。我这么说是因为我使用的库中的许多方法都暗示它是 JPG 编码的,并且第一个和最后 2 个字节是 255 216
我正在制作个人网页,我已将其草稿上传到 www.kurtpeek.com。我注意到的一个错误是,我在“关于我”部分中的一张 jpeg 图片“MIT_IAP_SAR_smallest.JPG”没有出现在
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 关闭 9 年前。 要求提供代码的问题必须表现出对所解决问题的最低限度的理解。包括尝试过的解决方案、为什么
我有一张图片列表,我想将它们组合成每组一张图片。每个图像都有一个名称以及它是什么类型的图表。我希望有一种方法可以使用名称对图像进行分组,并为每个组返回单个 jpg 或 png 的输出。组合后的图像如下
我通过 JavaScript 设置 img 的 src 属性,如下所示: var newimgid = "images/" + fldrid + "/" + id + ".jpg"; document
我有一个 TImage,它显示文件夹中的 JPG 图像。每个 JPG 图像名称都是数字(例如 5968.jpg)。如果 JPG 图像不存在,我当前加载模板 JPG。 但是,我想在检查本地文件夹后再检查
我的脚本很简单。 SELECT file_name FROM images WHERE `id` = '$id' AND `file_name` LIKE '%_1.jpg' 当我在 mysql 中运
我有一个页面显示了一些产品,例如:- 标题- 描述- 图片 当图像存储在表中时,其存储为例如“image.jpg”...但是我想在上传图像时制作图像名称的标题将用作图像的标题产品的 html 标题(t
我想创建一个按钮来在 a.jpg 和 b.jpg 之间反复翻转图像。这是我的代码: function changeImg() { document.getElementById("
有没有人为 Windows 制作一个简单的 DLL,这样我就可以将原始图像数据保存为 JPG 格式?它也应该有 .lib 和 .h 文件,所以我不需要搞乱源代码编译,因为我发现它非常困难。 需要考虑的
我有一张我正在尝试创建的动态图像,它以前在一个网络主机上工作,直到我发现他们删除了一些功能,其中一些破坏了我的形象。我最近搬到了 hostgator,我也无法让图像在他们的网站上工作。实际的 PHP
有时我将 JPG 图像保存为未压缩的位图 (BMP/PNG),以在更改图像时保持质量。 我想知道,理论上是否可以将位图重新编码回其原始 JPG 格式,而不会损失任何质量(我编辑的区域除外)? 编辑:我
我是一名优秀的程序员,十分优秀!