Чтобы поместить цвет в diffeent прямоугольник части изображения при нажатии кнопки щелкнула HTML и Javascript

-4

<!DOCTYPE HTML> 
    <html> 
     <script type="text/javascript" src="exscript.js"></script> 

     <body> 
     <p> 
     <div class="buttons"> 
     <input type = "button" style="background-color:lightgreen" value="PjM ECU" onclick="PjMECU()"> 
     <input type = "button" style="background-color:lightgreen" value="SW SD" onclick="Swsd()"> 
     <input type = "button" style="background-color:lightgreen" value="SW PD" onclick="Swpd()"> 
     <input type = "button" style="background-color:lightgreen" value="image view" onclick="imgview()"> 
     </div> 
     </button>  
     </li> 
     <li> 
      <p dir="ltr"> 
       <img src="ajay1.png" id="StaticView" style="border-width: 0px; border-style: solid; width: 1019px; height: 742px;" title="Static View picture" usemap="#StaticView" /></p> 
      <p dir="ltr"> 
      <map name="StaticView"> 
        <area coords="16,242,76,304" href="" shape="rect" target="_blank" />  
    <area coords="16,242,60,62" href="?section=" shape="rect" target="_blank" />  
    <area coords="934,362,76,49" href="?section=" shape="rect" target="_blank" /> 
    <area coords="91,314,60,49" href="?section=" shape="rect" target="_blank" />  
    <area coords="161,250,69,49" href="?section=" shape="rect" target="_blank" /> 
    <area coords="709,641,76,62" href="?section=" shape="rect" target="_blank" /> 
    <area coords="706,421,73,49" href="?section=" shape="rect" target="_blank" /> 
    <area coords="511,514,81,59" href="?section=" shape="rect" target="_blank" /> 
    <area coords="706,367,72,49" href="?section=" shape="rect" target="_blank" /> 
    <area coords="857,373,60,49" href="?section=" shape="rect" target="_blank" /> 
    <area coords="858,315,60,49" href="?section=" shape="rect" target="_blank" /> 
    <area coords="858,256,60,49" href="?section=" shape="rect" target="_blank" /> 
    <area coords="793,314,60,49" href="?section=" shape="rect" target="_blank" /> 
    <area coords="792,256,60,49" href="?section=" shape="rect" target="_blank" /> 
    <area coords="617,307,70,49" href="?section=" shape="rect" target="_blank" /> 
    <area coords="247,412,60,49" href="?section=" shape="rect" target="_blank" /> 
    <area coords="410,576,80,58" href="?section=" shape="rect" target="_blank" /> 
    <area coords="322,669,60,49" href="?section=" shape="rect" target="_blank" /> 
    <area coords="321,615,60,49" href="?section=" shape="rect" target="_blank" /> 
    <area coords="321,560,60,49" href="?section=" shape="rect" target="_blank" /> 
    <area coords="229,511,71,116" href="?section=" shape="rect" target="_blank" /> 
    <area coords="898,90,60,49" href="?section=" shape="rect" target="_blank" />  
    <area coords="453,247,60,49" href="?section=" shape="rect" target="_blank" /> 
    <area coords="385,413,60,49" href="?section=" shape="rect" target="_blank" /> 
    <area coords="384,358,60,49" href="?section=" shape="rect" target="_blank" /> 
    <area coords="934,309,75,49" href="?section=" shape="rect" target="_blank" /> 
    <area coords="934,256,76,49" href="?section=" shape="rect" target="_blank" /> 
    <area coords="704,260,74,49" href="?section=" shape="rect" target="_blank" /> 
    <area coords="386,303,60,49" href="?section=" shape="rect" target="_blank" /> 
    <area coords="932,420,79,49" href="?section=" shape="rect" target="_blank" /> 
    <area coords="623,38,60,54" href="?section=" shape="rect" target="_blank" />  
    <area coords="16,204,60,97" href="?section=" shape="rect" target="_blank" />  
    <area coords="22,119,60,49" href="?section=" shape="rect" target="_blank" />  
    <area coords="22,68,60,97" href="?section=" shape="rect" target="_blank" /> 
    <area coords="18,34,71,136" href="?section=" shape="rect" target="_blank" />  
    <area coords="457,33,60,62" href="?section=" shape="rect" target="_blank" />  
    <area coords="617,425,76,49" href="?section=" shape="rect" target="_blank" /> 
    <area coords="617,371,74,49" href="?section=" shape="rect" target="_blank" /> 
    <area coords="535,371,75,49" href="?section=" shape="rect" target="_blank" /> 
    <area coords="315,357,60,49" href="?section=" shape="rect" target="_blank" /> 
    <area coords="543,308,64,49" href="?section=" shape="rect" target="_blank" /> 
    <area coords="617,247,69,49" href="?section=" shape="rect" target="_blank" /> 
    <area coords="543,249,64,49" href="?section=" shape="rect" target="_blank" /> 
    <area coords="961,31,60,49" href="?section=" shape="rect" target="_blank" />  
    <area coords="898,31,60,49" href="?section=" shape="rect" target="_blank" />  
    <area coords="315,302,60,49" href="?section=" shape="rect" target="_blank" /> 
    <area coords="313,246,60,49" href="?section=" shape="rect" target="_blank" /> 
    <area coords="386,32,60,131" href="?section=" shape="rect" target="_blank" /> 
    <area coords="408,510,82,56" href="?section=" shape="rect" target="_blank" /> 
    <area coords="316,413,60,49" href="?section=" shape="rect" target="_blank" /> 
    <area coords="247,357,60,49" href="?section=" shape="rect" target="_blank" /> 
    <area coords="536,207,158,156" href="?section=" shape="rect" target="_blank" /> 
    <area coords="706,313,73,49" href="?section=" shape="rect" target="_blank" /> 
    <area coords="704,203,75,49" href="?section=" shape="rect" target="_blank" /> 
    <area coords="624,104,60,49" href="?section=" shape="rect" target="_blank" /> 
    <area coords="789,205,136,263" href="?section=" shape="rect" target="_blank" /> 
    <area coords="714,573,60,49" href="?section=" shape="rect" target="_blank" /> 
    <area coords="318,509,79,217" href="?section=" shape="rect" target="_blank" /> 
    <area coords="168,38,69,127" href="?section=" shape="rect" target="_blank" /> 
    <area coords="385,247,60,49" href="?section=" shape="rect" target="_blank" /> 
    <area coords="247,246,60,49" href="?section=" shape="rect" target="_blank" /> 
    <area coords="248,303,60,49" href="?section=" shape="rect" target="_blank" /> 
    <area coords="243,204,274,263" href="?section=" shape="rect" target="_blank" /> 
    <area coords="930,205,91,210" href="?section=" shape="rect" target="_blank" /> 
    <area coords="694,38,60,114" href="?section=" shape="rect" target="_blank" /> 
    <area coords="247,33,129,128" href="?section=" shape="rect" target="_blank" /> 
    <area coords="99,108,60,52" href="?section=" shape="rect" target="_blank" />  
    <area coords="705,510,80,120" href="?section=" shape="rect" target="_blank" /> 
    <area coords="624,644,72,59" href="?section=" shape="rect" target="_blank" /> 
    <area coords="122,510,95,115" href="?section=" shape="rect" target="_blank" /> 
    <area coords="21,511,90,114" href="?section=" shape="rect" target="_blank" /> 
    <area coords="165,314,60,49" href="?section=" shape="rect" target="_blank" /> 
    <area coords="89,250,60,49" href="?section=" shape="rect" target="_blank" />  
    <area coords="622,509,74,126" href="?section=" shape="rect" target="_blank" /> 
    <area coords="84,203,150,263" href="?section=" shape="rect" target="_blank" /> 

    </map></p> 

    </p> 
      <canvas id="view1"></canvas> <!--for API View--> 
      <canvas id="view2"></canvas> <!--for Statik View--> 
     </body> 
    </html>

// выше мой код, и теперь на JavaScript: окончательного изображения должно быть сгенерировано с использованием JavaScript. получить изображение от источника и некоторой части прямоугольника цвет должен быть изменен на белый (в том смысле, что я не должен увидеть некоторую часть изображения и загрузить изображение в любом формате)Чтобы поместить цвет в diffeent прямоугольник части изображения при нажатии кнопки щелкнула HTML и Javascript

function imgview() 
    { 
    var canvas = document.getElementById("view1"); 

       if(canvas.getContext) 
       { 
     var context_Context = canvas.getContext("2d"); 

      var img = document.getElementById("StaticView"); 
      var img_Context = img.getContext("2d"); 

       canvas.width = 1019; 
       canvas.height = 742; 

     context_Context.clearRect(706,367,778,416); 

     //image1 = new Image(); 
     //image1.src = "ajay1.png"; 



     //image1.addEventListener('load', drawImage1); 

     //context.drawImage(image1, 10, 10); 

       //canvas_Context.font="25px Georgia"; 
       //canvas_Context.fillText("ROLE TWO!",350,250); // to fill text 

       var dataUrl = canvas.toDataURL(); 
       window.open(dataUrl, "toDataURL() image", "width=1019, height=742"); 
       Window.document.write("<p>This is 'myWindow'</p>"); 
       } 

    } 

here i need: 
with the help of area cordis i want some of image part to hide or clear that area but not the whole image. 
1) clear the rectangle and diaplay the final image as .jpeg or 
2) change the colour of the image and display the final image as .jpeg

источник

2014-10-22 Rickey

Чувак исправить вопрос , добавьте фрагмент скрипта/кода вместо того, чтобы метать код – Alexandros

Этот вопрос слишком велик, во всех смыслах этого слова. Будьте технически конкретными, никто не захочет читать все, что просто помогает с тривиальными проблемами javascript. –

Пожалуйста, прочитайте [ask] –

I have found solution to this: 
1) use a button: 
<input type = "button" style="background-color:lightgreen" value="name" onclick="name()"> 
2) use an canvas element with id : 
<canvas id="view1"></canvas> 
3) image with image ID 

then in Javascript:::: 
function name() 
{` 

var canvas = document.getElementById("view1"); 

     if(canvas.getContext) 
     { 
      var canvas_Context=canvas.getContext("2d"); 
      var img = document.getElementById("image id"); 

      canvas.width = 1248; 
      canvas.height = 763; 
      canvas_Context.drawImage(img,0,0); 
      canvas_Context.fillStyle = 'White'; 

      //code for Role name : put the the (X1,Y1,width,Height) 

canvas_Context.fillRect(1127,329,116,63)  


canvas_Context.fillRect(936,366,82,55) 
canvas_Context.fillRect(93,318,66,55) 


     } 
}

источник

2014-11-06 17:39:55 Rickey

Чтобы поместить цвет в diffeent прямоугольник части изображения при нажатии кнопки щелкнула HTML и Javascript

ответ

Смежные вопросы