如何将画布作为 jpg 文件保存到服务器时增加 DPI
How to increase DPI when saving a canvas to the server as a jpg file?
Stackoverflow上的新功能。我正在研究一个解决方案，我可以在服务器上使用 jcrop 将裁剪的图像保存为.jpg文件。该图像也用作立方体表面上的纹理（我为此使用了三个.js）。我不是专业的编码员，但我设法将图片放在表面上并将其保存在服务器上。
但是，不幸的是，这些文件始终具有 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？
编辑：
我的代码有点复杂，因为我使用了外部资源。例如，画布标签被"隐藏"。这里还有上传过程的一些代码。
.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>
所以在这里我找不到任何画布标签。但我知道，它是生成的，我在"图标控制器"功能中的一个.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 文件，因为有一些库。这是链接。
编辑3：
不知道 markE 的答案去了哪里，但无论如何。解决方案很好，我希望我能设法将其实现到我的代码中。感谢您的努力，我真的很感激，因为我是新来的，甚至没想到会得到任何答案。:)
您需要更多像素才能获得足够的打印机分辨率。
一种方法（如 Blindman67 所说）是从原始图像裁剪，让打印机放大到所需的像素数。
您也可以手动添加像素...
方法如下：
如果需要添加像素，可以创建更大的第二个画布，并使用 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);
}
相关文章：
- 将JQuery Handontable保存到服务器上的excel文件中
- 如何在服务器上保存数据以备日后使用
- 正在服务器上保存降价内容
- 将处理后的图像发送到服务器进行保存
- 从Div创建图像，并使用Javascript和ASP.net将其保存到服务器
- 保存服务器中的变量
- AngularJS可以在没有任何服务器端技术的情况下将文件保存/写入服务器
- 如何上传一个XML对象并用Perl将其保存在服务器上
- 解析服务器云代码保存对象
- Python在尝试保存新的JSON文件时导致服务器错误
- 将 JSON 数据保存到服务器上
- 在将图像保存到服务器之前检查图像大小
- 缺少用于创建的模板.内部服务器错误-聚合物表单保存到数据库
- 将多维Javascript数组保存到服务器端CSV
- 在drawImage、C#、AJAX、ASP.NET之后将图像从画布保存到Web服务器
- 我正在尝试将javascript文本框的输入保存回服务器.我想从保存的弹出文本框中获得输入，以重命名文件夹
- Ember.js模型保存不向服务器发送数据
- 如何在asp中保存服务器中的更新完整日历事件
- 如何从 base64 数据 URI 在服务器端保存 PNG 图像
- 只保存服务器上更改的对象:Restful服务+angularjs
