Question

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 );

}

代码有效，我在服务器上获取图像，但质量很差：

Original Image

Cropped Image

有没有办法获得更多dpi？

修改

由于我使用了外部资源，因此我的代码有点复杂。画布标签是＆＃34;隐藏＆＃34;例如。这里还有一些上传程序的代码。

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>

所以在这里我找不到任何画布标签。但是我知道，它是生成的，我在＆＃34; Iconcontroller＆＃34;中的.js文件中找到了它。功能

EDIT2：

我想我找到了应该修改它的部分。我尝试了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.

EDIT3：

不知道markE的答案去了哪里，但无论如何。解决方案很好，我希望我能设法将它实现到我的代码中。感谢您的努力，我真的很感激，因为我是新来的，甚至没有得到任何答案。：）

Answer 1

您需要更多像素才能获得足够的打印机分辨率。

一种方式（如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);
}

将画布作为jpg文件保存到服务器时如何增加DPI？

1 个答案: