<commit_before><!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Paint</title>
    <style>
    #container {
        position: relative;
    }
    
    #imageView {
        border: 1px solid #000;
    }
    </style>
</head>

<body>
        <label>
            <input id="content" name="dialog" value="非常好" style="font-size: 26px; width: 256px;" maxlength="5">
        </label>
    <div id="container">
        <canvas id="imageView" width="256" height="256" onclick="download()"/>
    </div>
    <script>
    // Keep everything in anonymous function, called on window load.
    var download = {};
    if (window.addEventListener) {
        window.addEventListener('load', function() {
                var canvas, context, img;

                // Initialization sequence.
                function init() {
                    // Find the canvas element.
                    canvas = document.getElementById('imageView');
                    img = document.createElement('img');
                    img.src = '1.png';
                    if (!canvas) {
                        alert('Error: I cannot find the canvas element!');
                        return;
                    }

                    if (!canvas.getContext) {
                        alert('Error: no canvas.getContext!');
                        return;
                    }

                    // Get the 2D canvas context.
                    context = canvas.getContext('2d');
                    if (!context) {
                        alert('Error: failed to getContext!');
                        return;
                    }


                    img.addEventListener("load", function() {
                        clearCanvas();
                        context.drawImage(img, 0, 0);
                    }, false);

                    // To enable drag and drop
                    canvas.addEventListener("dragover", function(evt) {    
                        evt.preventDefault();
                    }, false); 
                    // Handle dropped image file - only Firefox and Google Chrome
                    canvas.addEventListener("drop", function(evt) {    
                        var files = evt.dataTransfer.files;    
                        if (files.length > 0) {        
                            var file = files[0];        
                            if (typeof FileReader !== "undefined" && file.type.indexOf("image") != -1) {            
                                var reader = new FileReader();             // Note: addEventListener doesn't work in Google Chrome for this event
                                            
                                reader.onload = function(evt) {                
                                    img.src = evt.target.result;            
                                };            
                                reader.readAsDataURL(file);        
                            }    
                        }
                        doodle(185, 50);
                        evt.preventDefault();
                    }, false);   
                }

                download = function() {
                    var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
                    var link = document.createElement('a');
                    link.href = image;
                    link.download = 'bear.png';
                    link.click();
                }

                var clearCanvas = function() {                
                    context.clearRect(0, 0, canvas.width, canvas.height);
                    context.drawImage(img, 0, 0);      
                };

                var content = document.getElementById('content');
                function doodle(x, y) {
                    clearCanvas();
                    var text = content.value.split('');
                    var size = 26;
                    if (text.length == 3)
                        size = 26
                    else if (text.length == 4)
                        size = 22
                    else if (text.length == 5)
                        size = 18
                    context.font = size + "px Georgia";

                    for (var i = 0; i < text.length; i++) {
                        context.fillText(text[i], x, y + i * (size + 8));<commit_msg>button click save as png<commit_after><!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Paint</title>
    <style>
    #container {
        position: relative;
    }
    
    #imageView {
        border: 1px solid #000;
    }
    </style>
</head>

<body>
        <label>
            <input id="content" name="dialog" value="非常好" style="font-size: 26px; width: 256px;" maxlength="5">
        </label>
    <div id="container">
        <canvas id="imageView" width="256" height="256"/>
    </div>
    <a href="javascript:download();" style="font-size: 26px;">儲存圖片</a>
    <script>
    // Keep everything in anonymous function, called on window load.
    var download = {};
    if (window.addEventListener) {
        window.addEventListener('load', function() {
                var canvas, context, img;

                // Initialization sequence.
                function init() {
                    // Find the canvas element.
                    canvas = document.getElementById('imageView');
                    img = document.createElement('img');
                    img.src = '1.png';
                    if (!canvas) {
                        alert('Error: I cannot find the canvas element!');
                        return;
                    }

                    if (!canvas.getContext) {
                        alert('Error: no canvas.getContext!');
                        return;
                    }

                    // Get the 2D canvas context.
                    context = canvas.getContext('2d');
                    if (!context) {
                        alert('Error: failed to getContext!');
                        return;
                    }


                    img.addEventListener("load", function() {
                        clearCanvas();
                        context.drawImage(img, 0, 0);
                    }, false);

                    // To enable drag and drop
                    canvas.addEventListener("dragover", function(evt) {    
                        evt.preventDefault();
                    }, false); 
                    // Handle dropped image file - only Firefox and Google Chrome
                    canvas.addEventListener("drop", function(evt) {    
                        var files = evt.dataTransfer.files;    
                        if (files.length > 0) {        
                            var file = files[0];        
                            if (typeof FileReader !== "undefined" && file.type.indexOf("image") != -1) {            
                                var reader = new FileReader();             // Note: addEventListener doesn't work in Google Chrome for this event
                                            
                                reader.onload = function(evt) {                
                                    img.src = evt.target.result;            
                                };            
                                reader.readAsDataURL(file);        
                            }    
                        }
                        doodle(185, 50);
                        evt.preventDefault();
                    }, false);   
                }

                download = function() {
                    var image = canvas.toDataURL("image/png");
                    var link = document.createElement('a');
                    link.href = image;
                    link.download = 'bear.png';
                    link.click();
                }

                var clearCanvas = function() {                
                    context.clearRect(0, 0, canvas.width, canvas.height);
                    context.drawImage(img, 0, 0);      
                };

                var content = document.getElementById('content');
                function doodle(x, y) {
                    clearCanvas();
                    var text = content.value.split('');
                    var size = 26;
                    if (text.length == 3)
                        size = 26
                    else if (text.length == 4)
                        size = 22
                    else if (text.length == 5)
                        size = 18
                    context.font = size + "px Georgia";

                    for (var i = 0; i < text.length; i++) {
                        context.fillText(text[i], x, y + i * (size + 8));
{'fraction_non_alphanumeric': 0.10519094443174022, 'fraction_numerical': 0.010976446375485937, 'mean_word_length': 0.948540877701047, 'pattern_counts': {'":': 0, '<': 41, '<?xml version=': 0, '>': 41, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 12, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6838751', 'n_tokens_mistral': 2183, 'n_tokens_neox': 1873, 'n_words': 485}