在处理和添加到pdf之前缩小图像？

Question

我编写了一些代码，旨在：

1. 将图像缩小指定量。
2. 将缩小的图像添加到 pdf（使用 jspdf）

我可以在浏览器中看到缩放（或缩小）的图像，但是 pdf 中的“缩放”图像与原始图像大小相同。我怀疑我的缩小方法只会改变图像的样式属性，而不是图像数据。如何有效地“缩小”图像？

谢谢， 马特

  function CreateNewImageSmaller(dataUrl, value) {
            //console.log('createNewImage');
            var img = new Image;
            img.src = dataUrl;
            img.width = img.width * ((value / 100));
            img.height = img.height * ((value / 100));
            return img;
            //var container = document.getElementById("container-smaller");
            //container.appendChild(img);
        }


function doCanvas() {
    /* draw something */
  var canvas = document.getElementById('original-canvas');
   var ctx = canvas.getContext('2d');
    ctx.fillStyle = '#f90';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = '#fff';
    ctx.font = '60px sans-serif';
    ctx.fillText('Code Project IE', 10, canvas.height / 2 - 15);
    ctx.font = '26px sans-serif';
    ctx.fillText('Click link above to save this as image', 15, canvas.height / 2 + 35);
  cropCanvas();
}

function downloadCanvas(link, canvasId, filename) {
  var canvas = document.getElementById('original-canvas');
  var imgData =  canvas.toDataURL();
  var img = new Image();
   img.filename = filename;
  img.onload = split_4;
  img.src = imgData;
  
 
}


 function split_4() {
   //var container = document.getElementById("imagediv");
    //        container.appendChild(this);
   var wA4 = 842;
   var hA4 = 595;
  
   var originalCanvas = document.getElementById('original-canvas'); 
         var offScreenCanvas = document.createElement('canvas');
            offScreenCanvas.width = originalCanvas.width;
            offScreenCanvas.height = originalCanvas.height;
            var ctx = offScreenCanvas.getContext('2d');
   //console.log('oscW:' + offScreenCanvas.width + ' oscH:' + offScreenCanvas.height);
      //# a4pages wide
            var numA4PagesWide = Math.ceil(this.width / wA4);
            //# a4pages high
            var numA4PagesHigh = Math.ceil(this.height / hA4);

            //console.log(numA4PagesWide + ", " + numA4PagesHigh);
   
   
   
  var doc = new jsPDF('l', 'pt', 'a4'); 
  
  var sx = 0;
  var sy = 0;
  var sw = wA4;
  var sh = hA4;
  var dx = 0;
  var dy = 0;
  var dw = wA4;
  var dh = hA4;
   
   
   for (var i = 0; i < numA4PagesHigh; i++) {
                y = i * hA4;
     sy = i*hA4;
     dy = 0;
     sh = hA4;
     dh = hA4;

            for (var j = 0; j < numA4PagesWide; j++) {
              if ((i!=0)| (j >0)){
                 doc.addPage();
                //console.log('added page');
              }
              //console.log('i:' + i + ' j' + j);
              sx = j * wA4; // starting x will be the A4 page
              dx = 0;
              sw = wA4;
              dw = wA4;
              
               
              ctx.drawImage(this,
        sx, sy,   // Start at sx/sy pixels from the left and the top of the image (crop),
        sw, sh,   // "Get" a `sw * sh` (w * h) area from the source image (crop),
        dx, dy,     // Place the result at dx, dy in the canvas,
        dw,dh); // With as width / height: dw * dh (scale)
             
               doc.addImage(offScreenCanvas.toDataURL(), 'JPEG',0,0, offScreenCanvas.width, offScreenCanvas.height,'alias' + i + j, 'FAST');
ctx.clearRect(0,0,offScreenCanvas.width,offScreenCanvas.height, 'alias' + i + j, 'FAST');
              
              
            }
   }
   
  doc.save(this.filename + '.pdf');
        };


function downloadCanvasAndShrink(link, canvasId, filename) {
  var canvas = document.getElementById('original-canvas');
  var imgData =  canvas.toDataURL();
  var imgSmaller = CreateNewImageSmaller(imgData,50);
     var container = document.getElementById("imagediv");
            container.appendChild(imgSmaller);
  
  var img = new Image();
  img.filename = filename;
  img.onload = split_4;
  img.src = imgSmaller.src;
  
 
}




/** 
 * The event handler for the link's onclick event. We give THIS as a
 * parameter (=the link element), ID of the canvas and a filename.
*/
document.getElementById('download').addEventListener('click', function() {
    downloadCanvas(this, 'original-canvas', 'test');
    downloadCanvasAndShrink(this, 'original-canvas', 'shrunk');
}, false);

/**
 * Draw something to canvas
 */
doCanvas();

body {
	    background-color:#555557;
	    padding:0;
	    margin:0;
	    overflow:hidden;
	    font-family:sans-serif;
	    -webkit-user-select: none;
	    -khtml-user-select: none;
	    -moz-user-select: none;
	    -ms-user-select: none;
	    user-select: none;
	}
	canvas {
	    border:1px solid #000;
	    float:left;
	    clear:both;
	}
	#download {
	    float:left;
	    cursor:pointer;
	    color:#ccc;
	    padding:3px;
	}
	#download:hover {
	    color:#fff;
	}
	/*
	div, input {
	    font-size:16px;
	    font-family:sans-serif;
	    border:1px solid #000;
	    border-radius: 5px;
	    float:left;
	    padding:5px;
	    width:50px;
	    margin:1px 1px;
	    background-color:#bbb;
	}
	input[type='text'] {
	    font-size:16px;
	    font-weight:bold;
	    width:70px;
	    text-align:center;
	    background-color:#fff;
	    padding-bottom:4px;
	}
	input[type='button'] {
	    font-size:16px;
	    font-weight:bold;
	    width:110px;
	    text-align:center;
	    background-color:#333;
	    color:#eee;
	    padding-bottom:4px;
	}
	input[type='button']:hover {
	    background-color:#fff463;
	    color:#000;
	}
	input[type='range'] {
	    width:100px;
	    margin:0 0 0 10px;
	}
*/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="download">Shrink Image and Download as pdf</a>
<canvas width="1000" height="170" id="original-canvas">Sorry, no canvas available</canvas>
<div id="imagediv"></div>

Answer 1

所以我做了更多的工作，发现完成我需要的最简单的方法是创建新画布来调整图像大小，然后从画布中拉出调整大小的图像。

代码如下：

function doCanvas() {
    /* draw something */
  var canvas = document.getElementById('original-canvas');
   var ctx = canvas.getContext('2d');
    ctx.fillStyle = '#f90';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = '#fff';
    ctx.font = '60px sans-serif';
    ctx.fillText('Code Project IE', 10, canvas.height / 2 - 15);
    ctx.font = '26px sans-serif';
    ctx.fillText('Click link above to save this as image', 15, canvas.height / 2 + 35);
  
   var img = new Image();
  img.src = canvas.toDataURL();
  img.id = 'orig-image';
  document.getElementById('image-from-orig-canvas').append(img);

}

function downloadCanvas(link, canvasId, filename) {
  var canvas = document.getElementById('original-canvas');
  var imgData =  canvas.toDataURL();
  var img = new Image();
   img.filename = filename;
  img.onload = split_4;
  img.src = imgData;
  
 
}


 function split_4() {
   //var container = document.getElementById("imagediv");
    //        container.appendChild(this);
  
  
   //var originalCanvas = document.getElementById('original-canvas'); 
         var offScreenCanvas = document.createElement('canvas');
            offScreenCanvas.width = this.width;
            offScreenCanvas.height = this.height;
            var ctx = offScreenCanvas.getContext('2d');
  
  var doc = new jsPDF('l', 'pt', 'a4'); 
        //# a4pages wide
    var wA4 = 842;
   var hA4 = 595;
            var numA4PagesWide = Math.ceil(this.width / wA4);
            //# a4pages high
            var numA4PagesHigh = Math.ceil(this.height / hA4);
   
  var sx = 0;
  var sy = 0;
  var sw = wA4;
  var sh = hA4;
  var dx = 0;
  var dy = 0;
  var dw = wA4;
  var dh = hA4;
   
   
   for (var i = 0; i < numA4PagesHigh; i++) {
                y = i * hA4;
     sy = i*hA4;
     dy = 0;
     sh = hA4;
     dh = hA4;

            for (var j = 0; j < numA4PagesWide; j++) {
              if ((i!=0)| (j >0)){
                 doc.addPage();
                //console.log('added page');
              }
              //console.log('i:' + i + ' j' + j);
              sx = j * wA4; // starting x will be the A4 page
              dx = 0;
              sw = wA4;
              dw = wA4;
              
               
              ctx.drawImage(this,
        sx, sy,   // Start at sx/sy pixels from the left and the top of the image (crop),
        sw, sh,   // "Get" a `sw * sh` (w * h) area from the source image (crop),
        dx, dy,     // Place the result at dx, dy in the canvas,
        dw,dh); // With as width / height: dw * dh (scale)
             
               doc.addImage(offScreenCanvas.toDataURL(), 'JPEG',0,0, offScreenCanvas.width, offScreenCanvas.height,'alias' + i + j, 'FAST');
ctx.clearRect(0,0,offScreenCanvas.width,offScreenCanvas.height, 'alias' + i + j, 'FAST');
              
              
            }
   }
   
  doc.save(this.filename + '.pdf');
        };


function downloadCanvasAndShrink(link, canvasId, filename) {
  /*
  var canvas = document.getElementById('original-canvas');
   var img = new Image();
            img.id = 'familyTreeImage';
            img.src = canvas.toDataURL('image/jpeg', 1.0);
  var smallerCanvas = resize_image(img);
  document.getElementById('resized-canvas').appendChild(smallerCanvas);
  */
  //var imgSmaller = CreateNewImageSmaller(img,50);
   //  var container = document.getElementById("imagediv");
   //         container.appendChild(imgSmaller);
  
  var img = new Image();
  img.filename = filename;
  //img.onload = split_4;
  img.onload = function(){
    var newCanvas = resize_image(this);
    var container = document.getElementById("resized-canvas");
  container.appendChild(newCanvas);
    
    var resizeImage = new Image();
    resizeImage.id='resized-image';
     resizeImage.filename = filename;
  resizeImage.onload = split_4;
    resizeImage.src = newCanvas.toDataURL();
    
    var rImageContainer = document.getElementById("resized-image");
    rImageContainer.appendChild(resizeImage);
    
  }
  img.src = document.getElementById('orig-image').src;
  
 
}


  function CreateNewImageSmaller(dataUrl, value) {
            //console.log('createNewImage');
    var resize_canvas = document.createElement('canvas');
    var width = 5;
    var height = 5;
    
       resize_canvas.width = width;
    resize_canvas.height = height;
    resize_canvas.getContext('2d').drawImage(dataUrl, 0, 0, width, height);   
    var dataUrl = resize_canvas.toDataURL("image/png");  
    
    
    
            var img = new Image();
            img.src = dataUrl;
            //img.width = img.width * ((value / 100));
            //img.height = img.height * ((value / 100));
            return img;
            //var container = document.getElementById("container-smaller");
            //container.appendChild(img);
        }



/** 
 * The event handler for the link's onclick event. We give THIS as a
 * parameter (=the link element), ID of the canvas and a filename.
*/
document.getElementById('download').addEventListener('click', function() {
    //downloadCanvas(this, 'original-canvas', 'test');
    downloadCanvasAndShrink(this, 'original-canvas', 'shrunk');
}, false);


var settings = {
  max_width: 300,
  max_height: 595
}


function resize_image(img){
  //var canvas = document.getElementById('original-canvas');
  var canvas = document.createElement("canvas");
  var ctx = canvas.getContext("2d")
  var canvasCopy = document.createElement("canvas")
  var copyContext = canvasCopy.getContext("2d")
  var ratio = 1
  
  if(img.width > settings.max_width)
      ratio = settings.max_width / img.width
  else if(img.height > settings.max_height)
      ratio = settings.max_height / img.height

  canvasCopy.width = img.width
  canvasCopy.height = img.height
  copyContext.drawImage(img, 0, 0)

  canvas.width = img.width * ratio
  canvas.height = img.height * ratio
  ctx.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvas.width, canvas.height)
  return canvas;
}


/**
 * Draw something to canvas
 */
doCanvas();

	body {
	    background-color:#555557;
	    padding:0;
	    margin:0;
	    overflow:hidden;
	    font-family:sans-serif;
	    -webkit-user-select: none;
	    -khtml-user-select: none;
	    -moz-user-select: none;
	    -ms-user-select: none;
	    user-select: none;
	}
	canvas {
	    border:1px solid #000;
	    float:left;
	    clear:both;
	}
	#download {
	    float:left;
	    cursor:pointer;
	    color:#ccc;
	    padding:3px;
	}
	#download:hover {
	    color:#fff;
	}
	/*
	div, input {
	    font-size:16px;
	    font-family:sans-serif;
	    border:1px solid #000;
	    border-radius: 5px;
	    float:left;
	    padding:5px;
	    width:50px;
	    margin:1px 1px;
	    background-color:#bbb;
	}
	input[type='text'] {
	    font-size:16px;
	    font-weight:bold;
	    width:70px;
	    text-align:center;
	    background-color:#fff;
	    padding-bottom:4px;
	}
	input[type='button'] {
	    font-size:16px;
	    font-weight:bold;
	    width:110px;
	    text-align:center;
	    background-color:#333;
	    color:#eee;
	    padding-bottom:4px;
	}
	input[type='button']:hover {
	    background-color:#fff463;
	    color:#000;
	}
	input[type='range'] {
	    width:100px;
	    margin:0 0 0 10px;
	}
*/
.Aligner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction:column;
}

.Aligner-item {
  max-width: 50%;
}

.first{
  order:0;
}

.second{
  order:1;
}

.third{
  order:2;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="download">Shrink Image and Download as pdf</a>
<div class="Aligner">
<div id="original-canvas-div" class="Aligner-item">
  <p>Original Canvas</p>
<canvas width="1000" height="170" id="original-canvas">Sorry, no canvas 
  available</canvas>
    
  </div>
  
  <div id="image-from-orig-canvas" class="Aligner-item">
    <p>Image From Original Canvas</p>
  </div>
  
<div id="resized-canvas" class="Aligner-item">
  <p>Resized Canvas</p>
</div>
<div id="resized-image" class="Aligner-item"></div>
  <p>Image Created from Resized Canvas
  </p>
</div>