PLACER UNE IMAGE DANS UN CANVAS

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
PASTA
Messages : 5
Enregistré le : 12 oct. 2022, 15:12

PLACER UNE IMAGE DANS UN CANVAS

Message par PASTA » 12 oct. 2022, 15:20

imag_a_gratter.jpg
Aspect actuel de mon code
imag_a_gratter.jpg (19.37 Kio) Vu 3701 fois
Bonjour,
J'ai réussi à adapter un code pour créer un image à gratter à la souris... Elle fait apparaître une autre image placée dessous.
Mon problème est de remplacer le canvas coloré orange par une image lambda. J'ai essayé plein de trucs, mais si je suis là, c'est que je n'y arrive pas...

Voici la partie javascript où se trouve le fond coloré (orange) à remplacer par une image. Merci à ceux ou celles qui voudront bien me fournir leurs conseils (si besoin je peux fournir le code complet...) :

Code : Tout sélectionner

<script id="rendered-js" >
$(function () {
  var canvas = document.getElementById("gratte");
  var ctx = canvas.getContext("2d");
  var lastX;
  var lastY;
  var mouseX;
  var mouseY;
  var canvasOffset = $("#gratte").offset();
  var offsetX = canvasOffset.left;
  var offsetY = canvasOffset.top;
  var isMouseDown = false;

  //@khadkamhn
  $('body,html').bind('selectstart', function () {return false;});
  var centerX = canvas.width / 5;
  var centerY = canvas.height / 5;
  var generate = function () {
    ctx.globalCompositeOperation = "source-over";
    ctx.beginPath();
    ctx.rect(0, 0, 280, 280);
	ctx.fillStyle = 'orange';//couleur à gratter
	
	    //ctx.fillStyle = "#ccc";
    //Pattern
    var img = document.createElement("canvas"),
    img_ctx = img.getContext('2d'),
    x,y,
    number,
    opacity = 1;
    img.width = 45;
    img.height = 45;
    for (x = 0; x < img.width; x++) {if (window.CP.shouldStopExecution(0)) break;
      for (y = 0; y < img.height; y++) {if (window.CP.shouldStopExecution(1)) break;
        number = Math.floor(Math.random() * 80);


      }window.CP.exitedLoop(1);
    }window.CP.exitedLoop(0);
    var png = document.createElement("img");
    png.setAttribute('src', img.toDataURL("image/jpg"));
    png.setAttribute('width', 45);
    png.setAttribute('height', 45);
    var pat = img_ctx.createPattern(png, "repeat");
    ctx.fillStyle = pat;
    //Pattern
    ctx.fill();
    ctx.font = "25px Castellar";
    ctx.fillStyle = "white";
    ctx.fillText("GRATTEZ-MOI", 50, 130);
    var coupons = ['<b>Avec la Pierre<br>On gagne à tous les coups !'];
    var coupon = coupons[Math.floor(Math.random() * coupons.length)];
    $('.message').html(coupon);
  };

  generate();
  $('.coupon-create').on('click', generate);

  function handleMouseDown(e) {
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);
    lastX = mouseX;
    lastY = mouseY;
    isMouseDown = true;
  }
  function handleMouseUp(e) {
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);
    isMouseDown = false;
  }
  function handleMouseOut(e) {
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);
    isMouseDown = false;
  }
  function handleMouseMove(e) {
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);
    if (isMouseDown) {
      ctx.beginPath();
      ctx.globalCompositeOperation = "destination-out";
	  ctx.rect(lastX, lastY, 30, 32, Math.PI * 2, false);
      ctx.fill();
      lastX = mouseX;
      lastY = mouseY;
    }
  }
  $("#gratte").mousedown(function (e) {handleMouseDown(e);});
  $("#gratte").mousemove(function (e) {handleMouseMove(e);});
  $("#gratte").mouseup(function (e) {handleMouseUp(e);});
  $("#gratte").mouseout(function (e) {handleMouseOut(e);});
  $('.gratte').removeAttr('style');
});
</script>

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: PLACER UNE IMAGE DANS UN CANVAS

Message par webmaster » 13 oct. 2022, 15:21

Bonjour,

Je ne suis pas sur que ca soit possible facilement
Il me faudrait le script complet avec la partie HTML pour faire des essais.
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

PASTA
Messages : 5
Enregistré le : 12 oct. 2022, 15:12

Re: PLACER UNE IMAGE DANS UN CANVAS

Message par PASTA » 13 oct. 2022, 16:11

Merci pour ta réponse mais j'ai adapté un autre code qui fonctionne avec une image.
Si cela a un intérêt, je peux placer le nouveau code complet pour info...

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: PLACER UNE IMAGE DANS UN CANVAS

Message par webmaster » 13 oct. 2022, 19:01

Je veux bien voir le code avec une image
Merci
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

PASTA
Messages : 5
Enregistré le : 12 oct. 2022, 15:12

Re: PLACER UNE IMAGE DANS UN CANVAS

Message par PASTA » 13 oct. 2022, 20:11

Voici le code qui fonctionne parfaitement :

Code : Tout sélectionner

<html>

<head>

  <meta charset="UTF-8">
  <title>Ça gratte</title>

  
<style>

body { 
  padding: 20px 0;
}

.container {
  position: relative; 
  width: 280px;
  height: 280px;
  margin: 0 auto;


}

.canvas {
  position: absolute;
  top: 0;
  cursor:url(cf.gif), auto;
  
}

.form {

  text-align:center;
}


</style>

</head>

<body>

  <div class="container" id="js-container">
  
  <canvas class="canvas" id="js-canvas" width="280" height="280"></canvas> 
  
  <form class="form" style="visibility: hidden;">
    <img src="fond_site.jpg"><br><br>
	
	<table><tr><td><img src="chem.gif"></td><td valign="middle"><font color="brown"><i>Vous avez l'outil : grattez-moi</i></font></td></tr></table>
  </form>  
</div>
</body>
   
      <script id="rendered-js"> 
(function() {
  
  'use strict'; 
  
  var isDrawing, lastPoint;
  var container    = document.getElementById('js-container'),
      canvas       = document.getElementById('js-canvas'),
      canvasWidth  = canvas.width,
      canvasHeight = canvas.height,
      ctx          = canvas.getContext('2d'),
      image        = new Image(),
      brush        = new Image();
      
  // base64 Workaround because Same-Origin-Policy
  image.src = 'pieragrate.jpg';
  image.onload = function() {
    ctx.drawImage(image, 0, 0);
    // Show the form when Image is loaded.
    document.querySelectorAll('.form')[0].style.visibility = 'visible';
  };
  brush.src ='brusch.gif';
  
  canvas.addEventListener('mousedown', handleMouseDown, false);
  canvas.addEventListener('touchstart', handleMouseDown, false);
  canvas.addEventListener('mousemove', handleMouseMove, false);
  canvas.addEventListener('touchmove', handleMouseMove, false);
  canvas.addEventListener('mouseup', handleMouseUp, false);
  canvas.addEventListener('touchend', handleMouseUp, false);
  
  function distanceBetween(point1, point2) {
    return Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2));
  }
  
  function angleBetween(point1, point2) {
    return Math.atan2( point2.x - point1.x, point2.y - point1.y );
  }
  
  // Only test every `stride` pixel. `stride`x faster,
  // but might lead to inaccuracy
  function getFilledInPixels(stride) {
    if (!stride || stride < 1) { stride = 1; }
    
    var pixels   = ctx.getImageData(0, 0, canvasWidth, canvasHeight),
        pdata    = pixels.data,
        l        = pdata.length,
        total    = (l / stride),
        count    = 0;
    
    // Iterate over all pixels
    for(var i = count = 0; i < l; i += stride) {
      if (parseInt(pdata[i]) === 0) {
        count++;
      }
    }
    
    return Math.round((count / total) * 100);
  }
  
  function getMouse(e, canvas) {
    var offsetX = 0, offsetY = 0, mx, my;

    if (canvas.offsetParent !== undefined) {
      do {
        offsetX += canvas.offsetLeft;
        offsetY += canvas.offsetTop;
      } while ((canvas = canvas.offsetParent));
    }

    mx = (e.pageX || e.touches[0].clientX) - offsetX;
    my = (e.pageY || e.touches[0].clientY) - offsetY;

    return {x: mx, y: my};
  }
  
  function handlePercentage(filledInPixels) {
    filledInPixels = filledInPixels || 0;
    console.log(filledInPixels + '%');
    if (filledInPixels > 50) {
      canvas.parentNode.removeChild(canvas);
    }
  }
  
  function handleMouseDown(e) {
    isDrawing = true;
    lastPoint = getMouse(e, canvas);
  }

  function handleMouseMove(e) {
    if (!isDrawing) { return; }
    
    e.preventDefault();

    var currentPoint = getMouse(e, canvas),
        dist = distanceBetween(lastPoint, currentPoint),
        angle = angleBetween(lastPoint, currentPoint),
        x, y;
    
    for (var i = 0; i < dist; i++) {
      x = lastPoint.x + (Math.sin(angle) * i) + 0;
      y = lastPoint.y + (Math.cos(angle) * i) - 10;
      ctx.globalCompositeOperation = 'destination-out';
      ctx.drawImage(brush, x, y);
    }
    
    lastPoint = currentPoint;
    handlePercentage(getFilledInPixels(32));
  }

  function handleMouseUp(e) {
    isDrawing = false;
  }
  
})();
</script>

</html>
Image
Fichiers joints
pieragrate.jpg
pieragrate.jpg (28.29 Kio) Vu 3678 fois
fond_site.jpg
fond_site.jpg (47.21 Kio) Vu 3678 fois
brusch.gif
brusch.gif (81 Octets) Vu 3678 fois

PASTA
Messages : 5
Enregistré le : 12 oct. 2022, 15:12

Re: PLACER UNE IMAGE DANS UN CANVAS

Message par PASTA » 13 oct. 2022, 20:12

cf.gif
cf.gif (372 Octets) Vu 3677 fois
Manquait cette image

PASTA
Messages : 5
Enregistré le : 12 oct. 2022, 15:12

Re: PLACER UNE IMAGE DANS UN CANVAS

Message par PASTA » 23 oct. 2022, 14:58

Encore mieux. Voir le résultat publié :

https://pierres-info.fr/grattezmoi/index.html

Répondre