时间戳

首页 > 解决方案 > 如何使用 scalecontroler 缩放图像

fabricjs - 如何使用 scalecontroler 缩放图像

问题描述

移动缩放控制器时无法缩放图像。它显示以下错误：

Uncaught TypeError: canvas.requestRenderAll is not a function

可以请任何人帮助解决这个问题吗？我希望为图像实现功能，请参阅此。这是我的代码：

    <!DOCTYPE html>
    <html>
    <head>
      <title>Instagram</title>
      <script type="text/javascript" src="fabric.js-1.7.21/dist/fabric.min.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <body>
        <canvas id="c" width="500px" height="400px"></canvas>
        <div id="range">
        <input type="range" class="image-scale-lever" step="0.1" max="3" min="0.1" value="1" id="scale-control"></label>
      </div>
      <script type="text/javascript">
       jQuery( document ).ready(function() {
        var canvas = this.__canvas = new fabric.Canvas('c');
          fabric.Image.fromURL('locket.png', function(oImg) {
            oImg.set({
          left: 0,
          top: 0,
          width:500,
          height:400
        });
            canvas.add(oImg);

             var scaleControl = $('#scale-control');
                   scaleControl.oninput = function(x) {
        this.val(x);
        oImg.scale(parseFloat(x)).setCoords();
        canvas.requestRenderAll();
              }

     function updateControls() {
                  scaleControl.oninput(oImg.scaleX);                          
            }

            canvas.observe("object:scaling", function (e) {
            updateControls();
    });
    });


    });


  [1]: https://withyoulockets.com/pub/media/catalog/product/cache/image/700x700/e9c3970ab036de70892d86c6d221abfe/k/a/katieopen1100px-min.png

标签： fabricjs

解决方案

这是结果。您需要在 onchange 事件回调中更改对象的比例。

    <!DOCTYPE html>
    <html>
    <head>
      <title>Instagram</title>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.21/fabric.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script  type="text/javascript" >
  jQuery( document ).ready(function() {
        var canvas = this.__canvas = new fabric.Canvas('c');
          fabric.Image.fromURL('https://withyoulockets.com/pub/media/catalog/product/cache/image/700x700/e9c3970ab036de70892d86c6d221abfe/k/a/katieopen1100px-min.png', function(oImg) {
            oImg.set({
          left: 0,
          top: 0,
          width:500,
          height:400
        });
            canvas.add(oImg);

             var scaleControl = $('#scale-control');
                   scaleControl.on("change",function() {

         var newValue = this.value; 

        oImg.scale(parseFloat(newValue)).setCoords();
        canvas.renderAll();
              })

              function updateControls() {
                  scaleControl.oninput(oImg.scaleX);                          
            }

            canvas.observe("object:scaling", function (e) {
            updateControls();
    });
    });


    });
</script>
      <body>
        <canvas id="c" width="500px" height="400px"></canvas>
        <div id="range">
        <input type="range" class="image-scale-lever" step="0.1" max="3" min="0.1" value="1" id="scale-control"></label>
      </div>

在这里查看： https ://jsfiddle.net/3mjhxcyn/2/

推荐阅读