Изготовление зеркального холста, масштабирование и поворот

Question

У меня проблема с очень сложной задачей. Моя основная цель - сделать «точную» копию изображения с точным преобразованием, применяемым в CSS3. Что я сделал, вы можете это увидеть here

У меня есть div, содержащий тег изображения, а справа я пытаюсь сделать его репликой с элементом холста. сверху у вас есть опции управления для исходной области слева. вы можете повернуть его или масштабировать, установив значения в области управления.

Теперь попробуйте масштабировать его до 0,5 и поверните на 45 градусов. теперь вы можете видеть, что изображение переустановлено и также обрезано со всех четырех сторон, я хочу, чтобы оно было точным, как левое. Я попробовал несколько математики здесь, но он чувствует, что я над посмотрел что-то очень простой

для создания копии Я использую следующий скрипт

function myCopy(){ 
      var cache = document.getElementById('mimg'); 
      var canvas = document.createElement('canvas'); 

      var cxt = canvas.getContext("2d"); 
      var ang = getRotationDegrees($("#mimg")) * Math.PI/180; 
      var scle = getScaleValue($("#mimg")); 
      var p = $("#mimg").position(); 
      var c_w = cache.width*scle; 
      var c_h = cache.height*scle; 

      canvas.width = c_w; 
      canvas.height = c_h; 

      cxt.save(); 

      cxt.translate(c_w/2,c_h/2); 
      cxt.rotate(ang); 
      cxt.translate(-c_w/2,-c_h/2); 
      cxt.drawImage(cache,0,0,c_w,c_h); 
      var myData = cxt.getImageData(0, 0, c_w,c_h);     

      cxt.restore(); 

      var dcan = document.getElementById("myCanvas"); 

      var cxt1 = dcan.getContext('2d'); 

      cxt1.save(); 
      cxt1.fillStyle = "rgb(255,255,255)"; 
      cxt1.fillRect(0,0,cache.width, cache.height); 

      cxt1.putImageData(myData,0,0,0,0,c_w,c_h); 

      cxt1.restore(); 

      $("#holder").css("left",p.left); 
      $("#holder").css("top",p.top); 
     } 

и вот мой HTML структура левой части (оригинал один)

<div id="divclip" style="position:relative;width: 600px; height:600px;overflow: hidden;border: solid 1px black"> 
     <div style="border: 1px solid red;display:inline-block"> 
      <img id="mimg" class="clip-svg" src="1.png" alt="Harry Potter"> 
     </div> 

    </div> 

и здесь для правой части (реплика одного из созданной функции myCopy)

 <div style="position: absolute; left: 650px; top:35px;border:1px solid #d3d3d3;"> 
     <div id="holder" style="position:relative; left: 0px; top: 0px;border:1px solid red;"> 
      <canvas id="myCanvas" width="600" height="600" style=""> 
      </canvas>     
     </div> 
    </div> 

Любая помощь будет высоко оценена.

Благодаря

Answer 1

Вы позиционирование скопированного изображения, перемещая держатель DIV с помощью CSS вместо того, чтобы позиционировать его, используя параметры putImageData.

Я предлагаю удаление этих:

$("#holder").css("left",p.left); 
$("#holder").css("top",p.top); 

и вместо того, чтобы в вашем putImageData использовать функцию что-то вроде:

cxt1.putImageData(myData,p.left, p.top); 

Поскольку я не могу проверить свой код не будет совершенным. Я предлагаю сделать jsFiddle, так что людям легче помочь с вашим кодом.