Thay đổi kích thước hình ảnh tương ứng để vừa với canvas HTML5

Question

Tôi đang cố gắng viết một plugin jQuery sẽ có chức năng tương tự như trình chỉnh sửa sản phẩm dựa trên Flash trên Zazzle.com. Những gì tôi cần biết là cách sử dụng chức năng canvas context.drawImage(), tôi có thể chèn hình ảnh và thay đổi kích thước hình ảnh để vừa với canvas mà không bóp méo nó.

Hình ảnh có kích thước 500x500px và do đó là canvas, nhưng vì một lý do nào đó khi tôi đặt 500x500 cho hình ảnh, kích thước của nó là lớn.

Đây là mã đầy đủ của tôi cho đến nay:

(function($) { 

    jQuery.fn.productEditor = function(options) { 

     var defaults = { 
      'id'  : 'productEditor', 
      'width'  : '500px', 
      'height' : '500px', 
      'bgImage' : 'http://www.wattzup.com/projects/jQuery-product-editor/sampleProduct.jpg' 
     }; 


     return this.each(function() { 

      var $this = $(this) 

       var options = $.extend(defaults, options); 

      // Create canvas 
      var canvas = document.createElement('canvas'); 

      // Check if their browser supports the canvas element 
      if(canvas.getContext) { 
       // Canvas defaults 
        var context = canvas.getContext('2d'); 
        var bgImage = new Image(); 
        bgImage.src = options.bgImage; 
        bgImage.onload = function() {   
        // Draw the image on the canvas 
        context.drawImage(bgImage, 0, 0, options.width, options.height); 
       } 

       // Add the canvas to our element 
       $this.append(canvas); 
       // Set ID of canvas 
       $(canvas).attr('id', options.id).css({ width: options.width, height: options.height }); 




      } 
      // If canvas is not supported show an image that says so 
      else { 

       alert('Canvas not supported!'); 


      } 


     }); 

    }; 
})(jQuery); 

Bất kỳ lời chỉ trích mang tính xây dựng khác cũng hoan nghênh.

Answer 1

Đây là vấn đề:

$ (canvas) .attr ('id', options.id) .css ({width: options.width, chiều cao: options.height});

Bạn đang đặt chiều rộng/chiều cao CSS của canvas khi bạn cần đặt thuộc tính chiều rộng và chiều cao trực tiếp. Bạn không bóp méo hình ảnh được vẽ, bạn đang bóp méo chính canvas. Canvas vẫn là 300x150 (mặc định) và chỉ được kéo dài CSS thành 500x500. Vì vậy, ngay bây giờ bạn đang vẽ một hình ảnh 500x500 trên một canvas kéo dài 300x150!

Bạn cần phải làm:

var defaults = { 
     'id'  : 'productEditor', 
     'width'  : '500', // NOT 500px, just 500 
     'height' : '500', // NOT 500px, just 500 
     'bgImage' : 'http://www.wattzup.com/projects/jQuery-product-editor/sampleProduct.jpg' 
    }; 

... 

// Create canvas 
var canvas = document.createElement('canvas'); 
canvas.width = options.width; 
canvas.height= options.height; 

... 

$(canvas).attr('id', options.id); // DON'T change CSS width/height 

Lưu ý rằng việc thay đổi chiều rộng hoặc chiều cao của một canvas xóa nó vì vậy đây phải được thực hiện trước khi sử dụng drawImage.