test.html 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Canvas Save Scaled Image</title>
  7. <script>
  8. document.domain = "cocorobo.cn"
  9. </script>
  10. </head>
  11. <body>
  12. <!-- <canvas id="myCanvas" width="400" height="200" style="border:1px solid #000;"></canvas>
  13. <button id="saveScaledImage">Save Scaled Image</button>
  14. <script>
  15. document.addEventListener('DOMContentLoaded', () => {
  16. const canvas = document.getElementById('myCanvas');
  17. const context = canvas.getContext('2d');
  18. const saveScaledImageBtn = document.getElementById('saveScaledImage');
  19. // Draw something on the canvas
  20. context.fillStyle = 'green';
  21. context.fillRect(10, 10, 100, 100);
  22. saveScaledImageBtn.addEventListener('click', () => {
  23. // Create a temporary canvas for scaling
  24. const tempCanvas = document.createElement('canvas');
  25. const tempContext = tempCanvas.getContext('2d');
  26. // Set the dimensions of the temporary canvas (scaled size)
  27. const scaledWidth = 200; // Change this to your desired width
  28. const scaledHeight = 100; // Change this to your desired height
  29. tempCanvas.width = scaledWidth;
  30. tempCanvas.height = scaledHeight;
  31. // Draw the original canvas content on the temporary canvas with scaling
  32. tempContext.drawImage(canvas, 0, 0, canvas.width, canvas.height, 0, 0, scaledWidth, scaledHeight);
  33. // Save the scaled canvas content as an image
  34. const scaledImageDataURL = tempCanvas.toDataURL('image/png');
  35. console.log('Scaled Canvas Data URL:', scaledImageDataURL);
  36. // Optionally, open a new window and display the scaled image
  37. const scaledImageWindow = window.open('', '_blank');
  38. scaledImageWindow.document.write('<img src="' + scaledImageDataURL + '" />');
  39. });
  40. });
  41. </script> -->
  42. <iframe src="https://metagpt.cocorobo.cn/dist/index.html" id="123" frameborder="0"></iframe>
  43. </body>
  44. </html>
  45. <script>
  46. window.addEventListener('message', function (e) {
  47. console.log(e) //{data:'params'}
  48. // fatherFunction()
  49. })
  50. window.onload = function(){
  51. let ifm = document.getElementById("123")
  52. console.log("ifm.contentWindow",ifm.contentWindow)
  53. }
  54. </script>