如何预览从画布中选择的正确图像？

Question

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var rect = {};
var drag = false;
var storeRects = [];
var isMoving = false;
make_base();
init();


function make_base() {
  base_image = new Image();
  base_image.src = 'https://www.w3schools.com/css/img_fjords.jpg';
  base_image.onload = function() {
    context.drawImage(base_image, 0, 0, 800, 500); 
  }
}

function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
  };
}

function init() {

    canvas.addEventListener('mousedown', mouseDown, false);
    canvas.addEventListener('mouseup', mouseUp, false);
    canvas.addEventListener('mousemove', mouseMove, false);
}

function mouseDown(e) {
    rect.startX = e.pageX - this.offsetLeft;
    rect.startY = e.pageY - this.offsetTop;
    drag = true;
}

function mouseMove(e) {
    if(drag) {
        isMoving = true;
        rect.w = (e.pageX - this.offsetLeft) - rect.startX;
        rect.h = (e.pageY - this.offsetTop) - rect.startY ;
        draw();
    }
}

function draw() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.drawImage(base_image, 0 ,0, 800, 500);
    storeRects.forEach(function(rect) {
        context.beginPath();
        context.rect(rect.x, rect.y,rect.w, rect.h);
        context.stroke();
    });


    context.lineWidth="1";
    context.strokeStyle = "red";
    context.beginPath();
    context.rect(rect.startX, rect.startY, rect.w, rect.h);
    context.stroke();
}

function mouseUp() {
    drag = false;
    if(isMoving === true) {
        storeRects.push({
            x: rect.startX,
            y: rect.startY,
            w: rect.w,
            h: rect.h,
        });

        var c = document.getElementById("myCanvasPreview");
        var ctx = c.getContext("2d");
        var pre_base_image = new Image();
        pre_base_image.src = 'https://www.w3schools.com/css/img_fjords.jpg';
        ctx.drawImage(pre_base_image,
(Math.min(storeRects[0].x, storeRects[0].x + Math.abs(storeRects[0].w)) / canvas.width) * pre_base_image.width,
(Math.min(storeRects[0].y, storeRects[0].y + Math.abs(storeRects[0].h)) / canvas.height) * pre_base_image.height,
(Math.abs(storeRects[0].w) / canvas.width) * pre_base_image.width , 
(Math.abs(storeRects[0].h) / canvas.height) * pre_base_image.height,
0, 0, 
Math.abs(storeRects[0].w), 
Math.abs(storeRects[0].h)
);
        isMoving = false;
    }
}

<canvas id="myCanvas" width="800" height="500" style="border:1px solid #000000;">
    </canvas>
    <canvas id="myCanvasPreview" width="800" height="500" style="border:1px solid #d3d3d3;">
    </canvas>

当我选择图像中的人物时，我想在另一个画布上预览它。 现在，我可以预览但看起来该区域不正确。

Answer 1

您需要确保拥有正确的坐标。您必须指定左上角（最小坐标）

您还需要缩放到图像大小。

这将修复现有代码。

    final ConstraintLayout cl = (ConstraintLayout) findViewById(R.id.constraintLayout);
    final ScrollView sc=(ScrollView) findViewById(R.id.scrollView);
    final Button btnButton = (Button) findViewById(R.id.buttontest);
    final LinearLayout ll = (LinearLayout) findViewById(R.id.linearLayout);
    final RelativeLayout rl = (RelativeLayout) findViewById(R.id.rLayout);



    btnButton.setOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View v) {

            ImageView im= new ImageView(UserAreaActivity.this);
            im.setImageResource(R.mipmap.ic_launcher);
            im.setScaleType(ImageView.ScaleType.FIT_XY);

            RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(150, 150);

            Random r = new Random();
            Random r2 = new Random();

            int x = r.nextInt(rl.getWidth());
            int y = r2.nextInt(rl.getHeight());


            if(x+(layoutParams.width) >= rl.getWidth()){
                x=x-layoutParams.width;
            }

            if(y+(layoutParams.height) >= rl.getHeight()){
                y=y-layoutParams.height;
            }

            layoutParams.leftMargin=x;
            layoutParams.topMargin=y;

            im.setLayoutParams(layoutParams);



            TextView tv = new TextView(UserAreaActivity.this);
            tv.setText("my text");


            rl.addView(im);
            ll.addView(tv);

            System.out.println("ID "+im.getId());
            System.out.println("Left "+im.getLeft());
            System.out.println("Right "+im.getRight());
            System.out.println("Top "+im.getTop());
            System.out.println("Bottom "+im.getBottom());


            for (int i = 0; i < rl.getChildCount(); i++) {

                View subView = rl.getChildAt(i);

                if (subView instanceof ImageView) {
                    ImageView imageView = (ImageView) subView;

                    System.out.println("ID "+i);
                    System.out.println("Left "+imageView.getLeft());
                    System.out.println("Right "+imageView.getRight());
                    System.out.println("Top "+imageView.getTop());
                    System.out.println("Bottom "+imageView.getBottom());

                }
            }

        }

    });

检查您之前的问题，因为我添加了一个解决此问题的答案，因为您需要执行上述代码。