dongtiao2976 2016-03-17 20:58
浏览 704
已采纳

使用Javascript中的X,Y坐标裁剪图像

I'm triying to crop an dataURL image with X and Y coordinates and width and height.
I don't want to resize the image. I just want to get the zone (x,y) and the width and height.
I've alerdy done this in PHP, but now I'm triying to do it in JS. Here's my actual code:

function resizeImage(url, width, height, x, y, callback) {
var canvas = document.createElement("canvas");
      var context = canvas.getContext('2d');
      var imageObj = new Image();

      imageObj.onload = function() {
        var sourceX = 0;
        var sourceY = 0;
        var sourceWidth = imageObj.width;
        var sourceHeight = imageObj.height;
        var destWidth = width;
        var destHeight = height;
        var destX = x;
        var destY = y;

        context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
        callback(canvas.toDataURL())
      };
      imageObj.src = url;
}

This function just changes the width & height, and that's not the result that it's supposes to do.

Here's my PHP code (if it can be helpful to better understand me)

<?php
class Cropper {
    var $x;
    var $y;
    var $dataURL;
    var $width;
    var $height;
    var $filter;
    function __construct($x, $y, $dataURL, $width, $height, $filter) {
        $this->x = $x;
        $this->y = $y;
        $this->dataURL = $dataURL;
        $this->width = $width;
        $this->height = $height;
        $this->filter = $filter;
    }
    function setHeader() {
        header('Content-Type: image/png');
    }
    function Render() {
        $image = $this->dataURL;
        $image = substr($image, 22);
        $img = imagecreatetruecolor(340, 462);
        $org_img = imagecreatefromstring(base64_decode($image));
        imagecopy($img, $org_img, 0, 0, $this->x, $this->y, $this->width, $this->height);
        if($this->filter == 1) imagefilter($img, IMG_FILTER_GRAYSCALE);
        if($this->filter == 2) {
            imagefilter($img,IMG_FILTER_GRAYSCALE);
            imagefilter($img,IMG_FILTER_COLORIZE,100,50,0);
        }
        ob_start(); 
            imagepng($img);
            imagealphablending($img,true);
            $image_data = ob_get_contents(); 
        ob_end_clean(); 
        $image_data_base64 = base64_encode($image_data);
        imagedestroy($img);
        return 'data:image/png;base64,'.$image_data_base64;
    }
}
?>

I've also made a draw to better understand me:

Picture

EDIT: sorry, inversed between X and Y

So the function needs to return the yellow area
How can I do this? What's wrong in my code? Thanks

  • 写回答

2条回答 默认 最新

  • duanmen1887 2016-03-17 22:21
    关注

    The key to preventing distortion seems to be setting the width and height of the canvas element. I then used the desired cropped or destination width and height for both source and destination, and then used 0, 0 as the starting x, y coordinates for the sub-rectangle, or cropped destination image:

    function resizeImage(url, width, height, x, y, callback) {
        var canvas = document.createElement("canvas");
        var context = canvas.getContext('2d');
        var imageObj = new Image();
    
        // set canvas dimensions
    
        canvas.width = width;
        canvas.height = height;
    
        imageObj.onload = function () {
            context.drawImage(imageObj, x, y, width, height, 0, 0, width, height);
            callback(canvas.toDataURL());
        };
    
        imageObj.src = url;
    }
    

    Edit

    Interesting discovery: In addition to cropping, you can use this to add padding to an image.

    var padding = 10,
        sourceImgWidth = 150,
        sourceImgHeight = 100,
        paddedWidth = sourceImgWidth + padding * 2,
        paddedHeight = sourceImgHeight + padding * 2,
        x = -padding,
        y = -padding;
    
    resizeImage('test.jpg', paddedWidth, paddedHeight, x, y, function (dataURL) {
        paddedImage.src = dataURL;
    });
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 电脑开机过商标后就直接这样,求解各位
  • ¥15 mysql , 用自己创建的本地主机和用户名 登录不上
  • ¥15 关于#web项目#的问题,请各位专家解答!
  • ¥15 vmtools环境不正常
  • ¥15 请问如何在Ubuntu系统中安装使用microsoft R open?
  • ¥15 jupyter notebook
  • ¥30 informer时间序列预测
  • ¥20 SSR引物多态性分析
  • ¥15 大漠插件在Win11易语言注册调用和免注册灵异事件,VS上注册调用完全没问题
  • ¥15 Addressable缓存机制做热更新的问题