ถามผู้รู้ HTML เรื่อง โชว์กราฟ ทับ บนรูปใน canvas ค่ะ
ปล.มือใหม่หัดเขียนคะ
คือ เรามี 2 หน้า

สามารถเลือกไฟล์รูปภาพแล้วขึ้นโชว์ ใน index.html
พอกด ปุ่ม submit จะส่งไปที่ index2.html จะมีกราฟ ขึ้นทัพอยู่บนรูปที่เราเลือกไว้ในcanvas

คัยพอทำเป็นบอกหน่อยคะ

ตอนนี้โชว์รูปใน canvas หน้า index.html ได้แล้ว แต่ส่งไปหน้า  index2.html  ไม่ขึ้นใน canvas คะ

index.html PAGE "..........................

    <div class="container">
      
        <section class="main-content">
              
            <p> <form method="post" enctype="multipart/form-data" action="
index2.html">
               <input type="file" id="take-picture" name="image" accept="image/*">
               <input type="hidden" name="action" value="submit">
            </p>

            <h3>Preview:</h3>
                <div style="width:100%;max-width:400px;">
                    <img src="about:blank" alt="" id="show-picture" width="100%">
                </div>

        </section>
    </div>


    <script>
        (function () {
            var takePicture = document.querySelector("#take-picture"),
                showPicture = document.querySelector("#show-picture");

                if (takePicture && showPicture) {
                    // Set events
                    takePicture.onchange = function (event) {
                    showPicture.onload = function(){
                        var canvas = document.querySelector("#c");
                        var ctx = canvas.getContext("2d");
                        ctx.drawImage(showPicture,0,0,showPicture.width,showPicture.height);    
                        }
                        // Get a reference to the taken picture or chosen file
                        var files = event.target.files,
                            file;
                        if (files && files.length > 0) {
                            file = files[0];
                            try {
                                // Get window.URL object
                                var URL = window.URL || window.webkitURL;

                                // Create ObjectURL
                                var imgURL = URL.createObjectURL(file);

                                // Set img src to ObjectURL
                                showPicture.src = imgURL;

                                // Revoke ObjectURL
                                URL.revokeObjectURL(imgURL);
                            }
                            catch (e) {
                                try {
                                    // Fallback if createObjectURL is not supported
                                    var fileReader = new FileReader();
                                    fileReader.onload = function (event) {
                                    showPicture.src = event.target.result;

                                    };                                }
                                catch (e) {
                                    // Display error message
                                    var error = document.querySelector("#error");
                                    if (error) {
                                    fileReader.readAsDataURL(file);

                                        error.innerHTML = "Neither createObjectURL or FileReader are supported";
                                    }
                                }
                            }
                        }
                    };
                }
            })();
    </script>

    <div> <input type="submit" name="action" value="Submit"></div>
        <script>
            (function () {
                var takePicture = document.querySelector("#take-picture"),
                    showPicture = document.querySelector("#show-picture");

                if (takePicture && showPicture) {
                    // Set events
                    takePicture.onchange = function (event) {
                        showPicture.onload = function(){
                            var canvas = document.querySelector("canvas1");
                            var ctx = canvas.getContext("2d");
  
        <p> <form method="post" enctype="multipart/form-data" action="index2.html">
            <input type="hidden" name="action" value="submit"
        </form> </p>
        </script>


    
                           ////////////////////////////////////////

inde2.html PAGE

<div class="container">
              
        <section class="main-content">

                <h4>Preview:</h4>
        <div style="width:100%;max-width:400px;">
    <canvas id="canvas1" width="400" height="300" style="border:2px solid #d3d3d3;"> </canvas>
          
        <p><form method="post" enctype="multipart/form-data" action="canvas1"></p>        
<script type="text/javascript"
          src="https://www.google.com/jsapi?autoload={

            'modules':[{
              'name':'visualization',
              'version':'1',
              'packages':['corechart']
            }]
          }"></script>

    <script type="text/javascript">
      google.setOnLoadCallback(drawChart);

      function drawChart() {

var data = google.visualization.arrayToDataTable([
          ['dBi', 'dBi', 'Off-axis angle(๘)'],
          ['-150',  100,     40],
          ['-100',  117,     46],
          ['-50',  166,     112],
          ['0',    103,      54],
          ['50',   100,      40],
          ['100',  117,      46],
          ['150',  66,      112]

        ]);

        var options = {
          curveType: 'function',
          legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        var chartURI = null;
        
        // Wait for the chart to finish drawing before calling the getImageURI() method.
        google.visualization.events.addListener(chart, 'ready', function () {
            //get image URI in format of PNG, necessary to draw on canvas later
            chartURI = chart.getImageURI();
        });
        
        //draw graph
        chart.draw(data, options);
        
        var c = document.getElementById("canvas1");
        var ctx = c.getContext("2d");
        
        //draw graph on canvas
        var imageObj1 = new Image();
        imageObj1.src = chartURI;
        ctx.drawImage(imageObj1,0,0);
        
        //set transparency
        ctx.globalAlpha=0.5;
        
        //draw image
        var imageObj2 = new Image();
        imageObj2.onload = function() {
            ctx.drawImage(imageObj2, 0, 0);
        };
        //image source, change to your image
        imageObj2.src = 'https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-xfp1/v/t1.0-9/10563053_10204773559717974_3770209751215406621_n.jpg?oh=520af6f8e56b27169b7694f060d39d65&oe=55927579&__gda__=1430977564_fe7c3e7d2ccfb61c0917bd03ae52556c', 'style="width:400px;height300px' ;
      }
    </script>

         </section>

    <div id="curve_chart" style="width: 400px; height: 300px"></div>